Don’t know if it’s been tried before, but had an idea to use the webvfx @Elusien created to animate pictures instead of text.
Tried it out and works pretty well, it’s an easy way to create lower third straps/graphics.
First create the strap/graphic in your favourite package and save it as a png with alpha.
If you haven’t already, grab the webvfx.js file from here:
I realised some time ago that this was the case. If I had thought about it more when I created the framework I would have used a different name. At the time it seemed logical to call a framework that used MLT-Shotcut’s WebVfx environment as the underlying technology “WebVfx”, but on reflection it should have been called something else.
I have updated the webpage. It now states at the very top of the page:
I have also changed the table to show only the latest version.
I wouldn’t like to do a whole animation sequence this way, it’s certainly doable but will be rather tedious.
There are programs better suited to animation, but for a “quick and dirty” way, SC and WebVfx is certainly an option.
Thanks for posting this - the html file is interesting - I’ve not explored animated images too much yet, and didn’t know about the “background-position” attribute. A question, though - do you need both “left” and “top” attributes as well as “background-position”? Don’t they do the same thing?
The backgroundPosition seems to over-ride left and top, however I left them in as WebVfx and html/css have some funny quirks.
An example of this is the need for opacity:0 in the img src tag.
This way I could experiment with left, top and backgroundPosition.
In theory, even video could be used instead of just images.