With little bit of css and javascript, we can have the web page display dialogs as if someone is hand writing it in real time.
Example
<br />
<div id="container">
</div>
<a class="hidden" href="https://xyzcode.blogspot.com/2019/04/glass-try-out.html" id="link" target="_blank"></a>
<style>
#container {
width: 80%;
margin: 20px auto;
min-height: 700px;
background-image: url("http://i67.tinypic.com/w14v4k.jpg");
//background-size: 100%;
}
#container svg {
min-height: 700px;
}
.hidden {
width: 0;
opacity: 0;
overflow: hidden;
}
</style>
<script src="https://rawcdn.githack.com/akzhy/Vara/02d135d2864a976f6c70464aebee0f81647695c8/src/vara.min.js">
</script>
<script>
var fontSize = 72;
if(window.screen.width < 700)
fontSize = 32;
else if(window.screen.width < 1200)
fontSize= 56;
var vara = new Vara(
"#container",
"https://rawcdn.githack.com/akzhy/Vara/ed6ab92fdf196596266ae76867c415fa659eb348/fonts/Satisfy/SatisfySL.json",
[
{
text: "My name is Emilly Wong",
y: 150,
fromCurrentPosition: { y: false },
duration: 3000
},
{
text: "After loosing a battle to black dragon",
y: 150,
fromCurrentPosition: { y: false },
delay: 3000,
duration: 4000
},
{
text: "The magician spell bound my soul at this forgotten place.",
y: 150,
fromCurrentPosition: { y: false },
delay: 3000,
duration: 4500
},
{
text: "...",
y: 150,
fromCurrentPosition: { y: false },
delay: 3000,
duration: 1000
},
{
text: "I tried to escape",
y: 150,
fromCurrentPosition: { y: false },
delay: 3000,
duration: 4000
},
{
text: "but",
y: 150,
fromCurrentPosition: { y: false },
delay: 3000,
duration: 1000
},
{
text: "His spell is always faster than mine",
y: 150,
fromCurrentPosition: { y: false },
delay: 3000,
duration: 4000
},
{
text: "I got a peek into his spell",
y: 150,
fromCurrentPosition: { y: false },
delay: 3000,
duration: 4000
},
{
text: "while(N > 1){",
y: 150,
id: "no_erase",
delay: 2000
},
{
text:
"exch(a, 1, N--); sink(a, 1, N);}",
y: 50,
x: 50,
duration: 4000
},
{
text: "Check out my spell",
color: "#421e82",
id: "github"
}
],
{
strokeWidth: 2,
color: "#523c33",
fontSize: fontSize,
textAlign: "center"
}
);
vara.ready(function() {
var erase = true;
vara.animationEnd(function(i, o) {
if (i == "no_erase") erase = false;
if (erase) {
o.container.style.transition = "opacity 1s 1s";
o.container.style.opacity = 0;
}
});
vara.get("github").container.style.cursor = "pointer";
vara.get("github").container.onclick = function() {
document.querySelector("#link").click();
};
});
</script>
