<div class="cs-instructions">
  <div class="cs-instructions-inner">
      <button type="button" onClick="launch();">Click to start the case</button> 
      <div class="typewriter">
    </div>
  </div>
</div>

<div class="credits">Typewriter effect realised with ReactJS inspired by Carmen Sandiego 1991 MS-DOS <br/><a href="https://www.julien-verkest.fr/" target="_blank">Julien Verkest ©️ april 2019 </a> </div>
@import url("//fonts.googleapis.com/css?family=Press+Start+2P");

body {
  font-family: 'Press Start 2P', cursive;
  background:#000; 
  line-height:20px;
}

.cs-instructions {
  background-image: url('https://i.imgur.com/1woliuF.png');
  background-size: contain;
  background-position: bottom left;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
  height:342px;
  width: 467px;
} 

.cs-instructions-inner {
  background-color:#fff;
  background-image: url('https://i.imgur.com/6aOej4c.jpg');
  background-size: contain;
  background-position: bottom left;
  background-repeat:repeat-y;
  font-size:14px;
  line-height:30px;
  padding:10px 30px 10px 30px;
  margin:10px 0 0 38px; 
  min-height:120px;
  width:330px;
  overflow-y:hidden;
  position: absolute;
  color:#000;
  z-index: 2;
  bottom:190px;
}

.credits {
  text-align:center;
  margin-top:40px;
  color:#444;
  font-size:9px;
}

.credits a {
  color:#444;
  text-decoration:none;
}
autoScroll = () => {
    const el = document.getElementsByClassName('cs-instructions-inner');
    el.scrollTo(0, el.scrollHeight);
  }

  typeWriter = (string, i=0) => {
    if (i < string.length) {
      document.getElementsByClassName('typewriter')[0].innerHTML += string.charAt(i); // display character one by one
      i++;
      autoScroll;
      setTimeout(() => typeWriter(string, i), 40); // speed
    }
  }
  
 launch = () => {

   var string = '*** FLASH ***';
   string += 'National treasure stolen from Paris.'; 
   string += 'The treasure has been identified as the elevator from the Eiffel Tower.';
   string += 'Female suspect reported at the scene of the crime. Your assignement: Track the thief from Paris to her hideout and arrested her!';
   typeWriter(string);
 } 
 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.