Menu
Is it possible to use javascript to control which frame of a GIF image is showing and/or stop the animation. I want to be able to load a GIF with several frames and only show one of them.
I know I could do it with lots of separate images, but if I can do what I want with a GIF, it will only be one file to worry about.
429
The JavaScriptvar gif = getGif(); We run the function and save the output in a variable gif , as above. The gif variable now contains the path of the GIF from the images in the page.
js installed, it's time to start controlling the GIF. Here's how you can pause a GIF then play on command — just add the freezeframe class (or a custom selector) to the GIFs you'd like control over. It's that easy! That's it!
You can use the libgif library.
It allows you to start/stop the gif and control which frame the gif is on.
<script type="text/javascript" src="./libgif.js"></script> <img src="./example1_preview.gif" rel:animated_src="./example1.gif" width="360" height="360" rel:auto_play="1" rel:rubbable="1" /> <script type="text/javascript"> $$('img').each(function (img_tag) { if (/.*\.gif/.test(img_tag.src)) { var rub = new SuperGif({ gif: img_tag } ); rub.load(function(){ console.log('oh hey, now the gif is loaded'); }); } }); </script> (most of the code is taken directly from their example)
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
