Tiled Image Transitions (HTML/CSS/Javascript) - easily tailored

OK, my last Christmas present to the forum in 2022.

I’ve put together an HTML file that accepts various parameters and breaks an image into tiles. Some of the parameters relate to properties than can be animated, such as opacity, scale, rotation etc. Play around with them and see what you can come up with. You need to provide it with one or more images.

I have an example below and the HTML file is also below, just remove the ‘.txt’ suffix and run it in a browser and use screen-recording software, like Sharex, to record it.

Or, run it as a “Browser Source” in OBS Studio, recording the animation and then open this clip in Shotcut.

tiled_images.html.txt (11.0 KB)

3 Likes

Looks great! However I found out that it won’t work if there is a space (or spaces) in the photo’s filename (eg “photo1.jpg” will work but “photo 1.jpg” won’t) …

Hi @elusien, seems that it won’t work with a bracket or brackets either? I tried p(1).jpg and got just a white background…

… but
p1.jpg,
p2.jpg,
p3.jpg etc works OK.

Very, very quick demo. Creates a nice transition between music pages:

Thanks @elusien for your late Christmas present :grin:
:+1: :+1:

1 Like

Sorry - my bad (as the Americans would say). I forgot to enclose the “url” parameter in quotes to handle those filenames containing these special characters.

The version for download in Post #1 has been fixed.

1 Like

I agree. It looks like the notes are being blown off the page.

1 Like

It does! It’s a useful transition which I will use in a future flute video… just what I was looking for …