<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.