Question

我正在尝试创建一个垂直滚动着陆页。我的HTML结构使用div标记如下＃slide-1，＃slide-2等一直到＃slide-5。通过快速插件的帮助和我所做的一些变化，我能够滚动页面，当你滚过它时，元素逐渐消失并淡出。我只是想知道是否有一种方法，当某些容器在视图中时，它们会对它们进行特定的动画。

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

我在页面上使用animate.css进行简单的css3动画。我在使用scrolldeck.js时遇到了一些问题，我希望用上面这个代码的这个或一些变体来创建它。

此外，如果有人不介意澄清为什么当我记录grabID时，它会返回所有五张幻灯片，而不是单张幻灯片。

感谢您的帮助！

Answer 1

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

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

1 个答案: