How to animate gif on current viewport/screen in website

Question

I m building a website where i m using some gif file but the gifs start animating as soon as the page loads. I want them to trigger as the user scroll on to the particular gif section i.e current viewport. See example: http://www.invisionapp.com/

I have searched the entire internet but couldnt get the simplest way of doint that. Anybody having any idea please assist.

Update your question, and put the code you've tried so far (html + js). — dingo_d, Oct 06 '15 at 05:51

score 0 · Answer 1 · answered Sep 11 '20 at 04:22

0

The website you have shared is using something known as lazyload. It will load images/videos only on scroll.

For some lazyload alternatives, please refer to these:

- How to lazy load natively

- Vanilla lazy load library on Github

answered Sep 11 '20 at 04:22

Diego Fortes

8,830
3
32
42

score -1 · Answer 2 · answered Oct 06 '15 at 05:23

-1

What you can do is use two images, one static and one which has an animation. So, when user scrolls over target, in your case viewport, then, you replace a static image with the animated gif image.

answered Oct 06 '15 at 05:23

Pramod

622
9
21

Hi Pramod, thnx for the help. can you provide a sample code to swap these images ? – Beginner Kid Oct 06 '15 at 05:39
@BeginnerKid you are only required to change src value of image tag when your event is triggered. – Pramod Oct 06 '15 at 05:54
yes i got your point. But how do i change the src value in the current viewport ?? – Beginner Kid Oct 06 '15 at 06:06
see this http://stackoverflow.com/questions/8800464/how-to-change-the-srcs-value-by-jquery – Pramod Oct 06 '15 at 06:08
Thats for mouseover/hover event. I want for current viewport bro, details of which is hardly available on internet – Beginner Kid Oct 06 '15 at 06:14
you want to trigger this when user scroll page, right. – Pramod Oct 06 '15 at 06:15
http://stackoverflow.com/questions/20737937/detect-if-a-scroll-event-is-triggered-manually-in-jquery – Pramod Oct 06 '15 at 06:20

How to animate gif on current viewport/screen in website

2 Answers2