一款简单好看的js+css3响应式垂直滚动时间轴动画特效,页面上下滚动时内容出现和隐藏动画效果非常不错。
js代码
<script>
var items = document.querySelectorAll(".timeline li");
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
function callbackFunc() {
for (var i = 0; i < items.length; i++) {
if (isElementInViewport(items[i])) {
if(!items[i].classList.contains("in-view")){
items[i].classList.add("in-view");
}
} else if(items[i].classList.contains("in-view")) {
items[i].classList.remove("in-view");
}
}
}
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791