前提是引用animate.css
html代码:
例如,在想要渐入的元素块上添加‘animated’,在属性type中添加你想要的渐入效果‘slideInLeft’
<div class="project animated" type="slideInLeft" id="story">
</div>
<div class="project animated" type="slideInDown" id="activity">
</div>
css代码
.animated{
visibility: hidden;
}
.animated.in{
visibility: visible;
}
js代码
var animateArr = [];
$('.animated').each(function (k,v) {
animateArr.push($(v).offset().top);
});
var thisDivIndex = 0;
$(window).scroll(function () {
var glt = animateArr[0]+700;
var lt = animateArr[0]+500;
if(($(window).scrollTop()>lt)&&($(window).scrollTop()<glt)){
var thisDiv = $($('.animated')[thisDivIndex]);
var animateCss = thisDiv.attr('type');
thisDiv.removeClass(animateCss);
thisDiv.addClass(animateCss);
thisDiv.addClass('in');
animateArr.splice(0,1);
thisDivIndex++;
}
});
贴这些代码进去,就ok啦!
网友评论