2

I have an object that I want to spin whenever the user scrolls the page and that object is currently in view.

So if my object is right in the middle of the page when the site is first loaded, I want it to spin "right" when the user scrolls down. When the user scrolls up, it will spin "left".

I can't figure out how to make it spin whenever the object is in view, not just when the top of the view is hit with the object. I am using jQuery Waypoint to detect scrolling, and jQuery Transit to animate my object. :

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
});
JimmyJammed
  • 9,598
  • 19
  • 79
  • 146

2 Answers2

1

This is what the offset option in Waypoints is used for. If you want the whole element to be in view (at the bottom of the viewport) you can use the value "bottom-in-view":

$('#home-spinner').waypoint(function (event, direction) {
    console.log("Waypoint moved "+direction);
    if(direction==='down'){
        $("#home-spinner").transition({ rotate: '+180deg' },1000,'ease');
    }
    if(direction==='up'){
        $("#home-spinner").transition({ rotate: '-180deg' },1000,'ease');
    }
}, {
    offset: "bottom-in-view"
});
imakewebthings
  • 3,388
  • 1
  • 23
  • 18
0

Don't have much experience with Waypoints but.. you could do something like this...

var win_height = $(window).height();
    var spinner_position = $('#home-spinner')

$(window).on('scroll', function() {
    var current_position = $(document).scrollTop();
    if (current_position >= spinner_position && current_position < spinner_position + win_height) {
        // spin it here
    };
});

You'll probably want to store the previous location on the page & compare current_position to it to determine the direction in which the user is scrolling. Likewise, you'll want to have vars like win_height be re-evaluated on re-size. I'm sure you'll figure out how to use it with your plugins.