思路：
当div出现在可视区域内时，通过给div动态加载类名来实现动画。
可视区域的判断：
div元素距离网页顶部的高度< 屏幕高度
滚动条滚动的距离>(div元素距离网页顶部的高度- 屏幕高度)
html：
<body>
<div id="showDiv" class="animated transitionLable left">1122222</div>
<div id="test" class="animated" style="height: 300px;width:200px;background: violet;">testtesttesttest</div>
</body>
第三方：
<link href="css/animate.min.css" rel="stylesheet">
<script src="js/jquery-2.1.1.min.js"></script>
js:
jq:
var scroll_H = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
function animate_z(ele, name) {
$(ele).each(function () {
var label_offset_top=$(this).offset().top-$(window).height()+100;
if(label_offset_top<scroll_H){
$(this).addClass(name);
}else if(label_offset_top>scroll_H){
$(this).removeClass(name);
}
});
}
$(window).scroll(function(){
animate_z('.animated', 'fadeInLeft')
})
原生：
function showDiv() {
var showId = document.getElementById('showDiv');
var test = document.getElementById('test');
var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var divTop = showId.getBoundingClientRect().top;
var testTop = test.getBoundingClientRect().top;
if (divTop <= clients) {
showId.classList.add('fadeInLeft');
} else {
showId.classList.remove('fadeInLeft');
}
if (testTop <= clients) {
test.classList.add('bounceInLeft');
} else {
test.classList.remove('bounceInLeft');
}
}
window.onscroll = showDiv;
网友评论