You can achieve a typewriter effect by using Elusien’s WebVfx framework (http://www.elusien.co.uk/shotcut/webvfx/index.php). There are explanations and examples of various animations which are possible with the framework.
I used it once but had some issues and did not have the time for troubleshooting (https://www.youtube.com/watch?v=GYABd6iuBWY&t=1m21s). To circumvent the problem, I just timed the animation with <body data-control=duration:fps> (so <body data-control=23:25> for my case) and screen captured the browser output. That worked exceedingly well.
In another topic, Elusien explained briefly how to use the effect: Typewriter-style Effect
My pleasure . Feel free to ask questions if you need assistance.
But Elusien might have to answer the more complex ones, since I am certainly not an expert after one use .
one question @jonray do i have to install the @Elusien’s framework again…because i have already have it installed, when i was trying out the JRTransition ?
Thanks for your appreciative comment!! Hope it helps…
No, you can use the webvfx.js file from earlier. Just make sure that you copy it and paste it into the same folder as your typewriter .html file, or it won’t work.
In case it’s useful, I found my html file of the young girl pianist video. I’ve attached it as a txt file - just change the extension to .html. Note, the background will be purple. To change it to transparent, either change purple to “transparent” or just add a letter or symbol - eg. purplex.
If you use Elusien’s typewriter, you might have to extend the duration a bit longer than the clip would be. I used it today and a full stop did not appear until I extended the clip from 5 to 7 s. To fit it into the track, I sped up the clip until I reached the desired length.
@samth hey i made some changes to elusion’s html file but i am facing a little problem…i need to push the subtitle at the bottom green line by 20px or say 5% towards top…how do i do it ?
i have uploaded the screenshot and html file…can you look at it?
Yes, it should but it seems there is a problem with frame rate and short clips:
This change did indeed work for me, so I suggest you try that tip.
Since you use a table, you have to use the padding property (CSS Styling Tables) as follows: table td { text-align: center; vertical-align:bottom; font: 25px 'Arial'; color: black; padding-bottom: 20px; }
I do not use a table but a simple div element with text in it. One advantage is for me that I can use top, bottom, right and left to position the text. But to be honest, I do not know if that is really a better way, I just got used to this .
Sorry, been playing in a golfing event all weekend, so just seen this.
The problem is that browsers usually have a MARGIN on the <body> element(for Chrome it is 8px wide) and so your table, which is supposed to occupy the whole screen actually causes the body to overflow outside the screen.
Put the following CSS code in front of the “table” declaration:
body {margin: 0; padding: 0; overflow: hidden; }
or change the table width and height to 100% instead of 100 vw and 100vh.