HTML typewriter

I’m trying to make the @Elusien code work in my browser, but it display al text immediately.

I have Elusien’s js files in the same directory.

Why?

Post the HTML:te3xt (Overlay HTML) filter and I’ll have a look.

Hello! I just copy your sample code, paste in a file.html and open in my browser.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Subtitles</title>
	<style>
	    html, body	{margin:0; padding:0; width: 100vw; height: 100vh; background-color: transparent; overflow: hidden; border: solid 1px #000;}
		#st1		{position: absolute;  width: 90vw; left: 0; top:30vh   ; margin: 1vh 0 1vh 5vw; padding: 0.25em;
					 background-color: #444;
					 font: 32px Open Sans Condensed, Liberation Sans, Arial, sans-serif; color: #fff;
					 text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, -1px 1px 0 #444, 1px 1px 0 #444;
					 text-align: center; border-radius: 0.5em;
					}
		._typewriter_ {border-right: solid #fff 2px; margin: 2px;}
	</style>
</head>
<body data-control='20:30'>
	<div id='st1' class='webvfx' data-typewriter='{start: 0.1, end: 0.9, stx: 10, etx: 20}'>
		Mary had a little lamb, <br>
		its <i>fleece</i> was white as snow <br>
		and everywhere that Mary went <br>
		that <b>lamb</b> was sure to go!
	</div>
</body>
<script src='./webvfx.js'></script>
</html>

It works for me. What system are you running on? I just noticed that the name of the Javascript file is “webvfx.js” rather than WebVfx.js", which is the name of the file. On a Windows system this does not matter as the filesystem is case-insensitive, but on Linux for example. “webvfx.js” is not the same file as “WebVfx.js”.

If on linux change the line:
<script src='./webvfx.js'></script>
to
<script src='./WebVfx.js'></script>

or change the name of the file.

1 Like

Yes. Of course. Linux here.

Thank you very much.

This topic was automatically closed after 90 days. New replies are no longer allowed.