当前位置：首页 > news >正文

粘性文本整页滚动效果

news 2025/8/11 20:19:33

效果展示

在这里插入图片描述

CSS 知识点

background 相关属性综合运用
position 属性的 sticky 值运用
scroll-behavior 属性运用
scroll-snap-type 属性运用
scroll-snap-align 属性运用

整体页面效果实现

<div class="container"><!-- 第一屏 --><div class="sec"><h2>Scroll Down</h2></div><!-- 第二屏 至 第七屏 --><div class="sec"></div><div class="sec"></div><div class="sec"></div><div class="sec"></div><div class="sec"></div><div class="sec"></div><!-- 第二屏 至 第七屏 的文字 --><div class="content"><h2><!-- 因为每屏都在上滑移动，所以这里定义每屏字符的偏移量 --><span style="--i:1">S</span><span style="--i:2">t</span><span style="--i:3">i</span><span style="--i:4">c</span><span style="--i:5">k</span><span style="--i:6">y</span></h2></div><!-- 第八屏 --><div class="sec"><h2>Thank For Watching :)</h2></div>
</div>

使用 scroll 相关属性完成每屏滚动效果

scroll-snap-type属性说明

设置了在有滚动容器的情形下吸附至吸附点的程度。
scroll-snap-align属性说明
属性将盒子的吸附位置指定为其吸附区域（作为对齐对象）在其吸附容器的吸附口（作为对齐容器）中的对齐方式。这样我们在滚动每一屏的时候，只有滑到一半多后释放鼠标滑动页面就会吸附到最近的容器上。
scroll-behavior属性说明

滚动的效果（立即滚动到吸附点或者平稳的滚动到吸附点）。

.container {position: relative;width: 100%;height: 100vh;overflow: auto;scroll-behavior: smooth;scroll-snap-type: y mandatory;
}.sec {position: relative;width: 100%;height: 100vh;display: flex;flex-flow: row wrap;justify-content: center;align-items: center;scroll-snap-align: center;
}

实现每屏的样式

/* 每屏的样式，这里只是展示第一屏的 */
.sec:nth-child(1) {background: rgba(23, 143, 255, 0.685) url(./images/bg1.jpg);background-size: cover;background-attachment: fixed;background-position: center;background-blend-mode: multiply;
}

实现第二屏开始的字符样式

.content {position: absolute;top: 0;width: 100%;text-align: center;
}.content h2 {position: relative;display: flex;justify-content: center;
}.content h2 span {position: sticky;top: 0;line-height: 100vh;height: 100vh;color: #fff;font-size: 14vw;/* 页面中已定义了对应的字母偏移量基础值，获取对应的基础值就可以 */margin-top: calc(100vh * var(--i));
}