Typewriter-style Effect

Help/How To
11

Steps:

  1. Download the javascript file from my website: Shotcut - Elusien's Contributions
  2. Save it (as webvfx.js) in a folder e.g. Shotcut
  3. Create an HTML file (say’ typing.html’) and save it in the same folder as
  4. Run this HTML (preferably in the Chrome browser) to check it does what you want.
  5. In Shotcut click on the ‘Overlay HTML’ filter, tick the ‘Use WebVfx’ box and select your HTML file (e.g. ‘typing.html’) et voila!

A simple HTML file for what you are looking at would be as shown below. It is set up for a 10 second clip at 30 frames per second. The first set of “typing” starts 10% (1second) into the clip and lasts until the 4th second. The next set of “typing” starts 60% (6seconds) into the clip and stops at the end.

If you want fancier fonts, drop shadows, glowing text etc, you can do this by editing the CSS in the "<style></style>" section of the HTML.

For more examples and a fuller explanation of the javascript possibilities see my website.

	<html lang='en'>
	<style>
		table     { height:100vh; width: 100vw;}
		table td { text-align: center; vertical-align: middle; font: 15px 'Arial'; color: red;}
	</style>

	<!-- This is a 10 second clip at 30 fps -->
	<!-- 1st set of text 10% (0.1) into clip till 50% -->
	<!-- 2nd set of text 60% (0.6) into clip till 100% -->

	<body data-control='10:30'>
		<table> <tr>
			<td>
				<b class='webvfx' data-typewriter='{start: 0.1, end: 0.5}'>
	THIS SERIES WAS PRODUCED IN COLLABORATION WITH THE EXPANSE TEAM
				</b>
	</br></br></br></br>
				<b class='webvfx' data-typewriter='{start: 0.6, end: 1.0}'>
	THE FOLLOWING INFORMATION CONSTITUTES OFFICIAL EXPANSE TV CANON
				</b>
			</td>
		</tr> </table>
	</body>
	<script src='./webvfx.js'></script>
	</html>