How do I animate on scroll inside a waypoint function?

Question

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

Answer 1

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});

Answer 2

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();}