CODEWITHSUNDEEP
jqueryanimationscrolljquery-waypoints
otherDewi
otherDewi

Reputation: 1098

How do I animate on scroll inside a waypoint function?

I have images that appear from the left and right of the screen as the user scrolls down.

Using divPosition = $('div').offset().top; to get the position of the containing element I subtract the value from scrollValue = $(document).scrollTop(); and apply the value to position left on an absolutely positioned image.

The offset of the containing div is calculated on refresh and resize. Without resizing the window the x=scrollValue - divPosition varies on refresh depending how far the page is scrolled. I want it to be consistent. Is there a better way of getting this type of animation to work.

For example is it possible to trigger the animation using the vertical scroll as the x value with waypoints? 

    window.onresize=function(){
        divPosition = $('div').offset().top;
    };

    $(document).scroll(function(){
        scrollValue = $(document).scrollTop();
        x = scrollValue - divPosition;
    }

Here is a link to the site. As an when I discover the cause of the problems I will post the relevant section of code in this question.

http://www.otherdewi.com/gg.html

Upvotes: 0

Views: 1269

Answers (2)

otherDewi
otherDewi

Reputation: 1098

Finally solved the issues.

  1. Cleaned up my code adding clearfix to ensure the height of each section was reporting correctly.

  2. Wrapped the funcitons animated on scroll inside Waypoint

    $('#about').waypoint(function(direction){
    $(document).scroll(function(){...});
});

  3. I added a window.onresize function to recalculate the position on the relevant container to account for the reflow of content.

    window.onresize = function(){
    tourPosition=$tours.offset().top;
    winH = window.innerHeight;
};

  4. To get a value to animate an elements from the left and right on scroll. I calculated scrollposition of the document + window height - position of the containing element.

    scrollPos = $(this).scrollTop();
var posX = scrollPos - tourPosition + winH;

  5. An offset was then added posX.

    $('pic1').css({'left':posX-600});

    $('pic2').css({'right':posX-800}); $('pic3').css({'left':posX-1200});

Upvotes: 0

Techsin
Techsin

Reputation: 532

can you post jsfiddle or link to website where right now its working..

I have a questions...

Why not just use css class that you can attach and deAttach, to keep div attached with top of window by using position:fixed and top:0. It'd be much more smooth and less heavy.

and yes you can make way points like this:

One Example of doing this is here:

http://jsfiddle.net/techsin/f7bhy/8/

var doc = $(document),
    wpoints = [5, 10, 15, 20, 25], //5 points for 5 slides...1st slide appear at start
    mh= wpoints[wpoints.length - 1], //and switch to 2nd at '5', and scrolling stop at 25
    h = wpoints[0],
    l = 0,
    i = 0,
    pos = 0;

doc.on('mousewheel', function (e) {
    if (e.originalEvent.wheelDelta > 0) {
        if (pos > 0) pos--;
    } else if (pos<mh) pos++;

    if (pos >= h){ set(1); }
    else if (pos <= l) set(-1);
});

function set(x) {
    if (x == 1 && (wpoints[i + 1] != undefined)) {
        l = h
        h = wpoints[++i];
        doWork();
    }

    if (x == -1 && (wpoints[i - 1] != undefined)) {
        h = l
        l = wpoints[--i - 1];
        doWork();
    }
}

doWork();
function doWork() {$('.slide').hide().eq(i).slideDown();}

Upvotes: 1

Related Questions