A while ago I posted some “Flip and Spin” HTML files which can be used for creating animated text.
I have adapted another HTML file which also allows users to create typewriter text, quite easily. Here is:
Typewriter text - HTML method - adapted by JonRay.
*NB this uses "Splitting.JS" - https://splitting.js.org/*Instructions.
Unzip the folder. Make sure the HTML and JS files remain in the SAME folder.To play the animation, double-click the HTML file.
The typewriter text will appear.
Start ShareX or OBS. Take a screen capture of the WHOLE SCREEN of your browser. (Activate the animation by clicking the refresh button).
Leave it recording for several seconds after the full text has appeared.
Save the screen capture as XXX.mp4.
In Shotcut
Import XXX.mp4 and place it on V2, above your base video on V1.Apply Crop:Rectangle filter (choose" transparent) to crop the outside edges of XXX.mp4 to give just white text on a black background.
Apply a Blend Mode (ADD) filter, or a ChromaKey filter, to make the black background transparent.
Split XXX.mp4 at the exact frame where the typewriter text animation begins, and trim the beginning.
You can re-size and re-position the text using the SPR filter.
EDITING the text and style.
Suggestion: Before editing the HTML file, copy and paste it, leaving the original unaltered, and make changes to the copy.
Open the HTML file in a text editor (I recommend Notepad++, but you can use any text editor).
Follow the instructions written on the HTML file to change the style and animation (type and speed).
After changes are made, SAVE the HTML file before opening in your browser.
Suggestion: Each time you make changes, save the new version as a new HTML file.
Things you can change:
Background colour
Font colour
Font style
Font size
Type of animation - “instant fade in” (typewriter effect) or
“gradual fade in” (a more softer effect)
Speed of animation
Speed of fade-in of each letter.
Here’s the ZIP:
JonRay - typewriter text effect NEW (HTML).zip (3.5 KB)
