滚动事件上的淡入/淡出元素

Question

I am trying to create a single vertical scroll landing page. My HTML is structured with div's labeled as follows #slide-1, #slide-2 etc. all the way to #slide-5. Through the help of a quick plug-in and some variations I've made, I'm able to scroll the page with the elements fading in and fading out when you scroll past it. I'm just wondering if there is a way that when certain containers are in view, they have a specific animation done to them.

Here is the js.

    // Fading in the elements, etc. 
slides = $('.slide');
slides.children('.section').addClass('hiding');
$('#slide-1').children('.section').addClass('showing');
$('#slide-1').find('.centeredPromoImage').addClass('fadeInUpBig');
$(window).scroll(function(d,h) {
    slides.each(function(i) {
        a = $(this).position().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) { 
            $(this).children('.section').removeClass('hiding').addClass('showing');
            $(this).find('.polaroid').addClass('fadeInRightBig');
            $(this).find('.left').addClass('fadeIn')
            $(this).siblings('.slide').children('.section').removeClass('showing').addClass('hiding');
        }
        var grabID = $(this).attr('id');
        console.log(grabID);
    });
});

I'm using animate.css for simple css3 animations on the page. I had some issues using scrolldeck.js and am looking to create this with this or some variation of this code above.

Also, if someone wouldn't mind clarifying why when I log grabID it returns all five slides, rather than the individual slide.

Thanks for your help!

Answer 1

我之前使用waypoints.js滚动分析http://imakewebthings.com/jquery-waypoints/