jquery on scroll event

Question

I am trying to make it so a img changes to a gif when the user is scrolling on a site.

HTML

<img src="img/giphy.gif" alt="" id="imgAnimate">

JQUERY

$(document).ready(function()
        {
            $("#imgAnimate").hover(
                function()
                {
                    $(this).attr("src", "img/giphy.gif");
                },
                function()
                {
                    $(this).attr("src", "img/giphy.png");
                });
        });

I got this but now is it when you hover over the img it changes into a gif. How can I make this happen when user is scrolling.

Thanks you if you can help me.

Do you mean when user scroll to the image itself or scroll in general ? — Ahmed Salama, May 27 '16 at 11:30
when the user scrolls with his mouse wheel the image needs to change to the gif and when he stops scrolling again the gif needs to change back to the image — Bart Bussel, May 27 '16 at 11:31
@Mohammad if I use the .scroll there it doesnt know where to place the images — Bart Bussel, May 27 '16 at 11:34
"hover" includes mousehover and mouseout events on your image. so when you mousehover you show gif img and when you mouseout you show jpg or png image. but when you say I want it on scroll which means once you scrolls your image will be converted to gif , but it will not go back to jpg or png image. — Dinnu Buddy, May 27 '16 at 12:02
so now you have to decide if you really want scroll function to work. then you must check if there is anything like scroll up and scroll down. so that on scroll down you can show gif and on scroll up show jpg or png image. And one more thing check when you want your function to work on window scroll or image container scroll — Dinnu Buddy, May 27 '16 at 12:07

score 1 · Answer 1 · edited May 23 '17 at 10:28

1

When you scroll, you can use this code

  $(document).ready(function(){
       $( window ).scroll(function(){
                $(this).attr("src", "img/giphy.gif");
            });
    });

when you stop scrolling you can Event when user stops scrolling

edited May 23 '17 at 10:28

Community

1
1

answered May 27 '16 at 11:31

user2278730

31
4

I tried that code but the gif is already moving when I am not scrolling or do I need to change something in my HTML aswel? – Bart Bussel May 27 '16 at 11:33
I gues that could work but with that code it doesnt know where to place the gif I gues – Bart Bussel May 27 '16 at 11:39

Ahmed Salama · Accepted Answer · 2016-05-27T12:13:57.473

1

https://jsfiddle.net/q6Lun0dj/1/

use this script :

(function( $ ) {
  $(function() {
    var scrollNow = false;
    $( window ).scroll(function() {
      if(!scrollNow){
        scrollNow = true;
        $("#imgAnimate").attr("src", "http://bart.aoweb.nl/template%205/img/giphy.gif");
      }
      clearTimeout( $.data( this, "scrollCheck" ) );
      $.data( this, "scrollCheck", setTimeout(function() {
        scrollNow = false;
        $("#imgAnimate").attr("src", "http://bart.aoweb.nl/template%205/img/giphy.png");
      }, 250) );

    });

  });

})( jQuery );

edited May 27 '16 at 12:13

answered May 27 '16 at 11:45

Ahmed Salama

2,795
1
11
15

It is not fully working like I want it to here is a link http://bart.aoweb.nl/template%205/ This is what I am working on I want the character to move smooth but when you scrolling now it is kinda wierd you know a way to fix it? – Bart Bussel May 27 '16 at 11:52
Ok, i updated the answer and I hope that is what you want , also see fiddle with your real example here https://jsfiddle.net/5rharr4h/ – Ahmed Salama May 27 '16 at 12:15

score 0 · Answer 3 · answered May 27 '16 at 11:29

0

Currently you're checking if the image is being hovered and only then changing it's source. Instead attach a scroll event listener to the document.

$(document).on('scroll', callback);

answered May 27 '16 at 11:29

GMchris

5,439
4
22
40

jquery on scroll event

3 Answers3