0
我正在尝试创建一个垂直滚动着陆页。我的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);
});
});
我在页面上使用简单的css3动画animate.css。我在使用scrolldeck.js时遇到了一些问题，并希望通过上面的代码或此代码的一些变体来创建它。
另外，如果有人不介意澄清为什么当我登录grabID它返回所有五张幻灯片，而不是单个幻灯片。
感谢您的帮助！