Results 1 to 5 of 5

Thread: trigger animated gifs when scrolled to

  1. #1
    Join Date
    Jan 2006

    trigger animated gifs when scrolled to

    Hi, is it possible to start and stop the animation on gifs by scrolling on and off of them.

    Thanks in advance,

  2. #2
    Join Date
    Mar 2011
    You could do it with some JavaScript. You'd need to create separate image files from each of the frames of the animated .gif. Then your JavaScript could detect when the image was fully visible and change the 'src' attribute of the <img> tag to point to the next image in sequence. A bit tricky, but not outrageously difficult. The question is why you'd want to do it? If the image isn't visible, why does it matter if the animation is active?
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2012
    As Rick has said, you can control GIF animations by scrolling over them using JavaScript. However, had you considered that scroll initiated actions, by default, do not work on mobiles? There are workarounds, but it may be simpler and more reliable to use a key press to control the animation. Furthermore, if you do decide to use a key press, you do not need to use JavaScript. It can be implemented in HTML, using an IFrame and one or more anchors:

    <a href="images/anim_1.gif" target="#iframe1">Anim 1</a><br>
    <a href="images/anim_2.gif" target="#iframe1">Anim 2</a><br>
    <a href="images/anim_3.gif" target="#iframe1">Anim 3</a><br>
    <a href="images/static.gif" target="#iframe1">Halt</a><br>

    <iframe src="images/static.gif" name="iframe1" width="360" height="480">
    <img src="images/static.gif" alt="" title="IFrame animation not supported">

    This code assumes that you have 3 GIF animations "anim_1.gif", "anim_2.gif" and "anim_3.gif" located in a sub-folder called "images", and a static GIF called "static.gif". Note: You can use a JPG or PNG image for the static picture if desired.

    The IFrame is set up to initially display the static image, (which could be blank if desired). Anchors are used to display each of the three animations. Assuming that the animations auto-repeat a fourth anchor can be used to halt the animation by re-displaying the static image, (or a different image if desired).

    1. Icons can be used instead of the text "Anim 1" etc...
    2. If you only want to display one animation, the static picture can be used to trigger the animation instead of separate text or icons.
    3. If IFrames are not supported, the static image is displayed with a suitable tool-tip.
    Last edited by jedaisoul; 10-03-2013 at 11:50 AM.

  4. #4
    Join Date
    Oct 2013
    No one has any input on this at all?

  5. #5
    Join Date
    Oct 2013
    Quote Originally Posted by Watt–Wilton View Post
    No one has any input on this at all?
    Really your publish is actually excellent and that i be thankful. You are writing perfectly that is amazing. I truly astounded by your publish regards.I like your post. It is good to see you verbalize from the heart and clarity on this important subject can be easily observed.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center