OK, another (Orthodox this time) Christmas present for the forum.
I’ve put together an HTML file that accepts various parameters and transitions two images as if flipping pages in a book. 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 two 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.
J’ai l’impression que la fonction ease n’est pas fonctionnelle. Je ne vois pas de différence entre toutes les valeurs, j’ai l’impression qu’il utilise tout le temps ease: out
I have the impression that the ease function is not functional.
I don’t see any difference between all the values, I have the impression that it uses ease: out all the time
@elusien - recently I made a similar HTML file … see demo video… but yours is more effective. The sheet music is easier to read with yours… (although to be fair, the advantage of mine is that I wanted to show flute-players the content of the sheet music without having the music stop too long for them to be able to take screen-shots of the score - I want them to purchase it instead!!
Having said that, it is easy to adapt mine so the music pauses at each turn.
@elusien, notice my code has my now trade-mark LENGTHY, complicated code!! I still can’t find the knack of simplifying code like you excel at!
The HTML file is below (remove the fake TXT extension) if anyone would like to experiment with it.
NOTE- you can use any photo of your choice with this HTML file. You’ll just need to replace the file-names of your photos in this section:
However, why not add a blur/mosaic (or my favourite) a spot-removal filter across a swathe along the central horizontal line instead to make that part unreadable?
Hello,
I do know nothing about HTML, but I saw that “Flip image Transitions…” short video and like it. So downloaded the “Flip_images.html.txt” file, removed the .txt from file’s name and opened it in the notepad.
Replaced the 3 image names with my 3 image files, each one in double quotes and commas as noted, Saved it as html file. The images and the html file in the same folder, but it does not work.
Can you please explain exactly where to ‘put’ the file names.
Answers will be appreciated.
Thanks
Motim
const images = [ // Set the strings below to the names of your images (You can have as many as you like, they don't have to be called img0.JPG... etc., do not forget the commas and the quotes)
// N.B. DO NOT have single-quotes (') in any of your filenames.
'Pool.JPG'
, 'Bar.JPG'
, 'Sunset.JPG'
];
All you need to do is edit the 3 lines with the JPG filenames, e.g.
The names are enclosed in single- (or double-) quotes and all but the first name have a comma before them. This should work. Can you post those lines in a reply so I can see?
Hello,
Thanks for the detailed answer.
Doing some experiments.
Here attached one experiment in a smal zip file, containing the ‘modified’ html file and the image files, per your request.
Thanks again
Motim Flip-Experiment.zip (1.5 MB)
To pause, I would have to change the code. I could either have a small Pause-Play button that you would click, or just look for a click anywhere on the image and Pause/Play.
From line 26 onwards (in the original file) there are parameters you can change, to tailor the slideshow to your needs. The parameters you need to alter are:
--transition_time : 2.5; /* time in secs of the transition from one image to the next */
--viewing_time : 3; /* time in secs that an image is visible before the transition to the next image takes place */
Below is a new version of the HTML file. It has a parameter:
--play_pause_button: false; /* true or false: true - a button is created that can pause and then play the animation; false - clicking anywhere on the webpage will pause/play the slideshow */
If you set it to true a small play-pause button will appear underneath the slides, clicking it will pause the slideshow, clicking it again will resume it…
If you set it to false, then clicking anywhere on the webpage will pause the slideshow, clicking again will resume it.
@elusien, wow, top-class service! The play/pause button is a brilliant addition.
Just two things - the button lies adjacent to the bottom edge of the images which would make it difficult to crop in SC if I need to… also when clicking the button on/off, the image jumps SLIGHTLY. To rectify this, I’ve amended the CSS by adding this (giving the button a width and height, and adding a margin-top):
Thanks jon, I was in a bit of a hurry to get it done before I had dinner, so missed out on the formatting. I’ve updated the download file in my earlier post to include your changes.
