延迟滚动动画
延迟滚动动画
延迟滚动动画免费下载 在 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 版权协议，转载请附上原文出处链接和本声明
