视觉设计-滚动效果

通常开发者会使用JavaScript来实现许多常见的效果，但是很多效果CSS就可以实现。下面就是比较常见的视觉效果案例。（背景图像的滚动速度比页面内容慢，产生视觉错位的幻觉。）

虽然在JavaScript中实现这种效果的案例很少，我只演示CSS的实现方式（注意浏览器兼容性）。

HTML

不需要太多html标签:

<main class="wrapper">
  <section class="section parallax bg1">
    <h1>nhehehe...</h1>
  </section>
  <section class="section static">
    <h1>umheiheihei...</h1>
  </section>
  <section class="section parallax bg2">
    <h1>uhahahaha...</h1>
  </section>
</main>

class用途:

1. .wrapper – 设置整个页面的透视和滚动
2. .section – 显示内容。大部分与视觉效果无关
3. .static – 添加背景
4. .parallax – 视觉错位需要添加::after伪元素
5. .bg1，.bg2 – 添加相应的背景图像（可以改用img标签）

CSS

然后就是css:

.wrapper {
  /* 需要将高度设置为一个固定值才能使生效
   * 100vh是可视区域的全高*/
  height: 100vh;
  /* 图像缩放将导致出现水平滚动条，因此隐藏x方向的溢出*/
  overflow-x: hidden;
  /* 启用y方向滚动*/
  overflow-y: auto;
  /* 产生视觉差的模拟距离*/
  perspective: 2px;
}

.section {
  /* 子元素需要根据父元素定位 */
  position: relative;
  /* 容器的高度。必须设置，但值是多少不重要*/
  height: 100vh;

  /* 文本 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-shadow: 0 0 5px #000;
}

.parallax::after {
  /* 显示并定位伪元素 */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* 让伪元素移动，
   * 然后将伪元素放大以填充可视区域
   * 因为伪元素离得越远，看起来移动就变得更慢*/
  transform: translateZ(-1px) scale(1.5);
  /* 背景图像填充整个元素 */
  background-size: 100%;
  /* 避免图像与同级其他元素重叠*/
  z-index: -1;
}

/* static样式 */
.static {
  background: red;
}

/* 设置实际的背景图像，这个很重要(◕ᴗ◕✿) */
.bg1::after {
  background-image: url('../imgs/900/700');
}

.bg2::after {
  background-image: url('../imgs/800/600');
}

NOTE

1. 可以将图像设置的离我们更远，以便移动得更慢。你得多尝试几次（我也试了很多次）。没有找到什么比动手实践更科学的方法，有的话赶快@indeex。
2. 如果您不想背景图像跟着滚动，只需使用background-attachment: fixed;替代 transform: translateZ(-1px) scale(1.5);就可以了。
3. 此方法在iOS的Safari上有问题。

code enjoy! 🤪🤪🤪

作者：indeex

链接：https://indeex.cc

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。