js+css3响应式垂直滚动时间轴动画特效

来源:https://www.sucaihuo.com/js/4279.html 2019-04-01 11:57浏览(812) 收藏

一款简单好看的js+css3响应式垂直滚动时间轴动画特效,页面上下滚动时内容出现和隐藏动画效果非常不错。
js+css3响应式垂直滚动时间轴动画特效
分类:日期时间 > 时间轴 难易:初级
查看演示 下载资源: 20 下载资源 下载积分: 20 积分

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>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2