Typewriter effect

Suggestion
4

@Anabel, @tin2tin1266027, @sauron, @jonray,

I have modified my WebVfx framework to enable users to create a “typewriter effect” onto videos using the Overlay HTML feature (see: WebVfx HTML Overlay Filters Update - Slideshows, Exploding Text). This is version 1.7 of the framework. (Shotcut - Elusien's Contributions).

The framework wraps every character in the relevant text inside a <span class=‘_typewriter_’></span> element. If you CSS style this to have a border e.g. ._typewriter_ : {border: solid #f00 4px;} then the text will have a cursor preceding the characters as they “type”.

The basic HTML to create the effect is:

<body data-control='20:30'>
	<div 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>
4 Likes