延迟滚动动画

延迟滚动动画免费下载 在 HTML、CSS 和 JavaScript 中

HTML：

 <div class="box box_1">  
 <ul>  
 <li></li>  
 <li></li>  
 <li></li>  
 <li></li>  
 </ul>  
 </div>  
 <div class="box box_2 under">  
 <ul>  
 <li></li>  
 <li></li>  
 <li></li>  
 <li></li>  
 </ul>  
 </div>  
 <div class="box box_3 under">  
 <ul>  
 <li></li>  
 <li></li>  
 <li></li>  
 <li></li>  
 </ul>  
 </div>  
 <div class="box box_4 under">  
 <ul>  
 <li></li>  
 <li></li>  
 <li></li>  
 <li></li>  
 </ul>  
 </div>  
 <div class="box box_5 under">  
 <ul>  
 <li></li>  
 <li></li>  
 <li></li>  
 <li></li>  
 </ul>  
 </div>

CSS：

 %clearfix {  
 ＆：在那之后 {  
 内容： ””;  
 显示：表格；  
 } ＆：后 {  
 明确：两者；  
 }  
 } $randomAngle：随机（4）* 45； @mixin 随机颜色（$选择器）{  
 #{$selector}: 线性梯度(#{$randomAngle}deg, unquote("rgba(#{random(256) - 1}, #{random(256) - 1}, #{random(256) - 1 }, 1)"), unquote("rgba(#{random(256) - 1}, #{random(256) - 1}, #{random(256) - 1}, 1)"));  
 // #{$selector}: unquote("rgba(#{random(256) - 1}, #{random(256) - 1}, #{random(256) - 1}, 1)");  
 } *， *：在那之后 {  
 -webkit-box-sizing：边框框；  
 -moz-box-sizing：边框框；  
 box-sizing：边框框；  
 边距：0；  
 填充：0；  
 } 身体 {  
 位置：相对；  
 字体大小：16px；  
 -webkit-font-smoothing：抗锯齿；  
 -moz-osx-font-smoothing：灰度；  
 最小宽度：320px；  
 背景：#fff;  
 } 。盒子 {  
 位置：绝对；  
 左：0；  
 宽度：100vw；  
 高度：100vh；  
 -webkit-transform: translate3d(0, 0, 0);  
 -moz-transform: translate3d(0, 0, 0);  
 -ms-transform: translate3d(0, 0, 0);  
 -o-transform: translate3d(0, 0, 0);  
 变换： translate3d(0, 0, 0);  
 -webkit-transition：所有 1s 三次贝塞尔曲线（0.745，-0.015，0.22，0.995）；  
 -moz-transition：所有 1s 三次贝塞尔曲线（0.745，-0.015，0.22，0.995）；  
 过渡：所有 1s 三次贝塞尔曲线（0.745，-0.015，0.22，0.995）；  
 过渡延迟：0.8s； ul {  
 位置：绝对；  
 最高：50%；  
 左：50%；  
 变换：翻译（-50%，-50%）；  
 文本对齐：居中；  
 宽度：80vw；  
 } 李{  
 显示：内联块；  
 垂直对齐：中间；  
 列表样式：无；  
 宽度：10vw；  
 高度：10vw；  
 边距：0 20px；  
 背景：#fff;  
 文本对齐：居中；  
 文本转换：大写；  
 字体大小：2em；  
 -webkit-transition：所有 0.8s 三次贝塞尔曲线（0.63、0.07、0.26、0.93）；  
 -moz-transition：所有 0.8s 三次贝塞尔曲线（0.63、0.07、0.26、0.93）；  
 过渡：所有 0.8s 三次贝塞尔曲线（0.63、0.07、0.26、0.93）；  
 } ＆。当前的 {  
 李{  
 不透明度：1；  
 变换：translateY(0)；  
 } @for $i 从 1 到 4 {  
 li:nth-child(#{$i}) {  
 转换延迟：#{1.6 + (0.1 * $i)}s  
 }  
 }  
 } ＆。在下面 {  
 李{  
 不透明度：0；  
 变换：translateY（200px）；  
 } @for $i 从 1 到 4 {  
 li:nth-child(#{$i}) {  
 转换延迟：#{(0.1 * $i)}s  
 }  
 }  
 } ＆。以上 {  
 李{  
 不透明度：0；  
 变换：translateY（-200px）；  
 } @for $i 从 1 到 4 {  
 li:nth-child(#{$i}) {  
 转换延迟：#{(0.1 * $i)}s  
 }  
 }  
 } } @for $i 从 1 到 5 {  
 .box_#{$i} {  
 @include 随机颜色（'背景'）；  
 z-index: #{$i};  
 // 顶部：#{($i - 1) * 100}vh;  
 变换： translateY(#{($i - 1) * 100}vh)  
 }  
 }

JavaScript：

 '使用严格'; 函数 hasClass(el, className) {  
 如果（el.classList）  
 返回 el.classList.contains(className);  
 别的  
 return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));  
 } 函数 addClass(el, classNames) {  
 classNames = classNames.split(' ')  
 如果（el.classList）  
 classNames.forEach((classname) => el.classList.add(classname))  
 else if (!hasClass(el, className))  
 classNames.forEach((classname) => el.className += " " + classname)  
 } 功能删除类（el，类名）{  
 如果（el.classList）  
 el.classList.remove(className);  
 否则如果（hasClass（el，className））{  
 var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');  
 el.className = el.className.replace(reg, ' ');  
 }  
 } ;（功能（） {  
 让 lastAnimation = 0,  
 section = Array.prototype.slice.call(document.querySelectorAll('.box')),  
 当前节 = 0,  
 len = section.length 常量句柄滚动 = (e) => {  
 e.preventDefault() 让 timeNow = Date.now(),  
 delta = e.deltaY,  
 新节 如果 (timeNow - lastAnimation < 2000) {  
 返回;  
 } 如果（e.deltaY < 0）{  
 // 向上  
 newSection = (currentSection > 0) ? currentSection - 1 : currentSection  
 } 别的 {  
 // 下  
 newSection = (currentSection < len - 1) ？ currentSection + 1 : currentSection  
 } if (currentSection !== newSection) {  
 // newSection 现在是 currentSection  
 // 而 `old` currentSection 是 previousSection  
 如果（当前节<新节）{  
 // 向下移动  
 removeClass(sections[newSection], 'under')  
 addClass(sections[newSection], 'current')  
 removeClass(sections[currentSection], 'current')  
 addClass(sections[currentSection], 'above')  
 } 别的 {  
 // 向上  
 removeClass(sections[newSection], 'above')  
 addClass(sections[newSection], 'current')  
 removeClass(sections[currentSection], 'current')  
 addClass(sections[currentSection], 'under')  
 } // 更新当前节  
 当前节 = 新节 section.forEach((item, index) => {  
 // item.style.top = `${(index - currentSection) * 100}vh`  
 item.style.transform = `translateY(${(index - currentSection) * 100}vh)`  
 })  
 } lastAnimation = timeNow  
 } // 首次加载  
 addClass(sections[currentSection], 'current')  
 document.addEventListener('keydown', (ev) => {  
 if (ev.keyCode === 38 || ev.keyCode === 40) {  
 ev.preventDefault()  
 返回假  
 }  
 }， 错误的）  
 document.addEventListener('wheel', handleScroll)  
 })()

HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com

完毕！享受 延迟滚动动画片段

现在下载

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/40020/42213009