素材牛VIP会员

JS+CSS3响应式垂直滚动时间轴动画特效

 所属分类:网页特效-滚动/拖拽,时间和日期

 浏览:232次-  下载:0次-  评论:0次-  发布时间:2019-04-01
JS+CSS3响应式垂直滚动时间轴动画特效兼容IE8
积分说明:注册即送15牛币,每日签到可获得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多说明»
素材描述:一款简单好看的js+css3响应式垂直滚动时间轴动画特效,页面上下滚动时内容出现和隐藏动画效果非常不错。

详细介绍

JS代码部分:

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); 

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0 已下载次数:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)