h5动画特效

Question

经常在h5页面上有这么一种效果，拉动滚动条，相应部分的内容会左移或右移出现。这么长一个页面，难道一直监听window.scroll来根据滚动距离加上animate.css这种类来实现么？我没有做过h5，不知道其实现原理

Answer 1

可以监听滚动条，也可以判断元素在窗口是否可见

var elm = document.getElementById('aaaaa')
var rect = elm.getBoundingClientRect();
//获取当前浏览器的视口高度，不包括工具栏和滚动条
//document.documentElement.clientHeight兼容 Internet Explorer 8、7、6、5
var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
//bottom top是相对于视口的左上角位置
//bottom大于0或者top-视口高度小于0可见
console.log(!(rect.bottom < 0 || rect.top - viewHeight >= 0));