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

一款简单好看的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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录