粘性文本整页滚动效果

效果展示

粘性文本整页滚动效果1.png 粘性文本整页滚动效果2.png 粘性文本整页滚动效果3.png

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

完整代码下载

完整代码下载