Search code examples
jqueryscrollgifanimated-gif

How to make GIF animate on scroll only?

I am building a Wordpress site that incorporates an animated GIF and I am trying to get the GIF to animate only when the user is scrolling.

The page is basically ready – http://www.fi1000.com/wp/ – but the GIF would work a lot better if it's only animating on window scroll.

I am just wondering if anyone out there might have an idea for a jQuery or CSS3 fix to achieve this? Not looking for the GIF to do anything except to not animate unless the user is scrolling.

The plugin I'm using to make the GIF move positions on scroll is called Skrollr https://github.com/Prinzhorn/skrollr

Thanks for reading!

Solution

  • You could use javascript and display a static image when stationary, then switch to the animated image during the onScroll event.