image.png
前提是引用animate.css
html代碼:
例如盏阶，在想要漸入的元素塊上添加‘a(chǎn)nimated’徒像，在屬性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啦!
