有些时候我们需要一些效果展示,并在指定的元素从页面底部出现在可视区域时加载。
效果
代码
CSS
.box {width: 100%;height: 200px;background: #ccc;margin-bottom: 10px;text-align: center;color: #fff;line-height: 200px;font-family: microsoft yahei;font-size: 40px; }
.animate { animation: showText 1s;}
@keyframes showText {from {font-size: 20px;}to {font-size: 40px;}}
HTML
JS
var box = document.getElementsByClassName('box');
document.addEventListener('scroll', function () {
var visibleBottom = window.scrollY + document.documentElement.clientHeight;
var visibleTop = window.scrollY;
console.log(document.documentElement.clientHeight);
for (var i = 0; i < box.length; i++) {
var centerY = box[i].offsetTop + (box[i].offsetHeight / 2);
if (centerY > visibleTop && centerY <