CSS 실용적인 팁: 시차를 사용하여 멋진 대화형 효과 얻기

이 기사에서는 CSS를 사용하여 스크롤 시차 효과를 얻는 약간의 요령을 소개하고 이 요령을 사용하여 흥미로운 대화형 특수 효과를 만듭니다. [학습 동영상 공유: css 동영상 튜토리얼, 웹 프론트엔드]

CSS를 사용하여 스크롤 시차 효과를 얻는 것과 관련하여 특정 솔루션을 자세히 설명하는 이전 기사가 있습니다. - CSS를 사용하여 시차 효과를 얻습니다. 관심 있는 학생들은 먼저 이 글을 확인해 보세요.

여기서는 순수한 CSS 시차 기술이 사용됩니다.

transform:translate3d를 사용하여 스크롤 시차를 얻습니다.

transform: translate3d 实现滚动视差

这里利用的是 CSS 3D，实现滚动视差效果。

原理就是：

• 我们给容器设置上 transform-style: preserve-3d 和 perspective: xpx，那么处于这个容器的子元素就将位于3D空间中，

• 再给子元素设置不同的 transform: translateZ()，这个时候，不同元素在 3D Z轴方向距离屏幕（我们的眼睛）的距离也就不一样

• 滚动滚动条，由于子元素设置了不同的 transform: translateZ()，那么他们滚动的上下距离 translateY 相对屏幕（我们的眼睛），也是不一样的，这就达到了滚动视差的效果。

关于 transform-style: preserve-3d 以及 perspective 本文不做过多篇幅展开，默认读者都有所了解，还不是特别清楚的，可以先了解下 CSS 3D。

核心代码表示就是：

<div>
    <div>translateZ(-1)</div>
    <div>translateZ(-2)</div>
    <div>translateZ(-3)</div>
</div>

html {
    height: 100%;
    overflow: hidden;
}

body {
    perspective: 1px;
    transform-style: preserve-3d;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.g-container {
    height: 150%;

    .section-one {
        transform: translateZ(-1px);
    }
    .section-two {
        transform: translateZ(-2px);
    }
    .section-three {
        transform: translateZ(-3px);
    }
}

总结就是父元素设置 transform-style: preserve-3d 和 perspective: 1px，子元素设置不同的 transform: translateZ，滚动滚动条，效果如下：

CodePen Demo -- CSS 3D parallax

很明显，当滚动滚动条时，不同子元素的位移程度从视觉上看是不一样的，也就达到了所谓的滚动视差效果。

借助 CSS 视差实现酷炫交互动效

OK，有了上面的铺垫，我们来看看这样两个有趣的交互效果。由群里的日服第一切图仔 wheatup 友情提供。

先来看第一个效果：

效果是一种文本交替在不同高度的层展示，并且在滚动的过程中，会有明显的 3D 视差效果。

这个效果并不困难，核心就在于：

• 利用了 transform-style: preserve-3d 和 perspective 构建不同的层次效果，制作视差效果

• 利用元素的 ::before，::after 构建了 3D 的效果

我们看一个最小化 DEMO：

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

.g-container {
    height: 150vh;
    perspective: 600px;
}

.g-box {
    width: 200px;
    height: 200px;
    background: #999;
    transform-style: preserve-3d;

    &::before,
    &::after {
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        transform-style: preserve-3d;
        height: 200px;
        background-color: #ccc;
    }
    &::before {
        transform-origin: top center;
        top: 0;
        transform: rotateX(-90deg);
    }
    &::after {
        transform-origin: bottom center;
        bottom: 0;
        transform: rotateX(90deg);
    }
}

滚动 g-container 容器，即可得到一种 3D 效果：

由于还需要视差效果，我们需要给不同的层赋予不同的 translateZ()，我们稍微改造下代码，给每个 g-box 中间，再加多一层正常的 div，再给每个 g-box 加上一个 translateZ()。

<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

.g-container {
    width: 400px;
    height: 150vh;
    perspective: 800px;
}

.g-normal {
    width: 200px;
    height: 200px;
    background: #666;
    transform-style: preserve-3d;
}

.g-box {
    width: 200px;
    height: 200px;
    background: #999;
    transform-style: preserve-3d;
    transform: translate3d(0, 0, 200px);

    &::before,
    &::after {
        // ... 保持不变
    }
}

• 由于 g-box 和 g-normal 的 translateZ 值不同，所以滚动的过程中会出现视差效果

• 由于 g-box 的 translateZ 值为 translateZ(200px)，两个伪元素的 rotateX 为正负 90deg，且高度为 200px，因此 g-box 和 g-normal 刚好可以通过 g-box여기서 사용되는 것은 스크롤 시차 효과를 얻기 위해 CSS 3D입니다.

원칙은 다음과 같습니다.

• 컨테이너를 transform-style: presents-3d 및 perspective로 설정합니다. : xpx이면 이 컨테이너의 하위 요소는 3D 공간

• 에 배치되고 하위 요소에 대해 다른 transform:transformZ()가 설정됩니다. 이번에는 3D Z축 방향의 요소와 화면(우리 눈) 사이의 거리도 다릅니다

• 스크롤 스크롤 막대는 하위 요소가 서로 다르게 설정되어 있으므로 transform:translateZ (), 화면(우리의 눈)을 기준으로 translateY 스크롤하는 위아래 거리도 달라서 스크롤 시차 효과를 얻습니다. 🎜

  🎜 transform-style: Preserve-3d 및 perspective에 대해서는 이 문서에서 너무 자세히 설명하지 않습니다. 기본적으로 독자들은 이미 알고 있습니다. 아직 특별히 명확하지는 않습니다. 예, CSS 3D에 대해 먼저 배울 수 있습니다. 🎜

  🎜핵심 코드 표현은 다음과 같습니다. 🎜

  <div>
      <div>
          <div></div>
          <div></div>
          // ... 重复 N 个
      </div>
  </div>

  .g-wrapper {
      width: 100vw;
      height: 100vh;
  }
  .g-inner {
      position: relative;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
  }
  .g-item {
      width: 300px;
      height: 100px;
      background: #000;
  }

  🎜요약은 상위 요소가 transform-style: presents-3d 및 perspective: 1px를 설정하고, 하위 요소가 서로 다른 transform:transformZ를 설정하고 스크롤 막대를 스크롤하면 효과는 다음과 같습니다. 🎜🎜🎜🎜CodePen 데모 - CSS 3D 시차🎜🎜🎜 분명히 스크롤 막대를 스크롤할 때 여러 하위 요소의 변위 정도가 시각적으로 다르므로 소위 스크롤 시차 효과가 달성됩니다. 🎜

  CSS 시차를 사용하여 멋진 대화형 효과 얻기

  🎜자, 위의 기초를 바탕으로 이 두 가지 흥미로운 대화형 효과를 살펴보겠습니다. 그룹 내 일본 서버 1위 커팅보이님, 위트업님의 사진입니다. 🎜🎜첫 번째 효과를 살펴보겠습니다. 🎜🎜🎜🎜효과는 서로 다른 높이의 레이어에 텍스트가 교대로 표시되는 것이며 스크롤 과정에서 명백한 3D 시차 효과가 나타납니다. 🎜🎜이 효과는 어렵지 않습니다. 핵심은 다음에 있습니다. 🎜
  • 🎜transform-style: Preserve-3d 및 perspective 다양한 수준의 효과 구성 및 시차 효과 만들기🎜🎜
  • 🎜 ::before 및 ::after 요소를 사용하여 3D 구축 효과 🎜🎜🎜🎜최소화된 데모를 살펴보겠습니다: 🎜

    .g-wrapper {
        // ... 与上述代码保持一致
        perspective: 200px;
        transform-style: preserve-3d;
    }
    .g-inner {
        // ... 与上述代码保持一致
        transform-style: preserve-3d;
        transform: translateY(calc(-50% + 100px)) translateZ(0) rotateX(90deg);
        transform-origin: bottom center;
    }

    .g-wrapper {
        // ... 与上述代码保持一致
        perspective: 200px;
        transform-style: preserve-3d;
    }
    .g-inner {
        // ... 与上述代码保持一致
        transform-style: preserve-3d;
        transform: translateY(calc(-50% + 100px)) translateZ(0) rotateX(90deg);
        transform-origin: bottom center;
    }
    .g-item {
        // ... 与上述代码保持一致
        transform: rotateX(-90deg);
    }

    🎜 g-container 컨테이너를 스크롤하여 3D 효과를 얻으세요: 🎜🎜🎜🎜시차 효과도 필요하기 때문에 서로 다른 를 서로 다른 레이어에 할당해야 합니다. (), 코드를 약간 수정하고 각 g-box 중간에 일반 div 레이어를 추가한 다음 일반 div를 각 code>g-box에 translateZ()로 추가합니다. 🎜

    .g-inner {
        animation: move 10s infinite linear;
    }
    @keyframes move {
        100% {
            transform: translateY(calc(-50% + 100px)) translateZ(calc(100vh + 120px)) rotateX(90deg);
        }
    }

    rrree
    • 🎜g-box와 g-normal의 ​​translateZ 값이 다르기 때문에 >, 스크롤하는 과정에서 시차 효과가 발생합니다🎜🎜
    • 🎜g-box의 translateZ 값이 translateZ(200px)이므로 code>, 두 개의 유사 요소의 <code>rotateX는 플러스 또는 마이너스 90deg이고 높이는 200px이므로 g-box 및 <code>g -normal은 g-box의 두 의사 요소를 통해 연결될 수 있습니다. 🎜🎜🎜🎜마지막으로 효과는 위에 표시된 것과 같습니다. 🎜🎜 🎜🎜🎜데모의 전체 코드: 🎜CodePen 데모 - 3D 시차 스크롤🎜🎜

      CSS 滚动视差动画 2

      OK，下面第二个滚动视差动画，也非常的有意思，想看看原版，也是来自于 wheatup 的 CodePen：

      

      CodePen Demo -- 3D Chat Viewer

      这里核心还是借助了 CSS 3D 的能力，但是由于使用的是滚动触发动画效果，并且有一定的从模糊到清晰的渐现效果，因此还是有一定的 JavaScript 代码。

      感兴趣的可以看看上述的源码。

      本文将尝试使用 CSS @Property 和 CSS 最新的特性 @scroll-timeline 还原该效果借助 JavaScript 实现的部分。

      当然，首先不管是否需要借助 JavaScript，核心的 3D 部分使用的都是 CSS。

      我们首先需要这样一个结构：

      <div>
          <div>
              <div></div>
              <div></div>
              // ... 重复 N 个
          </div>
      </div>

      .g-wrapper {
          width: 100vw;
          height: 100vh;
      }
      .g-inner {
          position: relative;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 10px;
      }
      .g-item {
          width: 300px;
          height: 100px;
          background: #000;
      }

      大概是这个效果：

      

      然后，我们添加一些 CSS 3D 变换：

      .g-wrapper {
          // ... 与上述代码保持一致
          perspective: 200px;
          transform-style: preserve-3d;
      }
      .g-inner {
          // ... 与上述代码保持一致
          transform-style: preserve-3d;
          transform: translateY(calc(-50% + 100px)) translateZ(0) rotateX(90deg);
          transform-origin: bottom center;
      }

      就能得到这样一种视角的效果：

      

      由于容器 g-inner 进行了一个绕 X 轴的 90deg 翻转，也就是 rotateX(90deg)，所以，我们再给 g-item 一个反向的旋转，把卡片翻转回来：

      .g-wrapper {
          // ... 与上述代码保持一致
          perspective: 200px;
          transform-style: preserve-3d;
      }
      .g-inner {
          // ... 与上述代码保持一致
          transform-style: preserve-3d;
          transform: translateY(calc(-50% + 100px)) translateZ(0) rotateX(90deg);
          transform-origin: bottom center;
      }
      .g-item {
          // ... 与上述代码保持一致
          transform: rotateX(-90deg);
      }

      就能得到这样一种视角的效果：

      

      此时，我们给容器一个赋予一个 translateZ 的动画：

      .g-inner {
          animation: move 10s infinite linear;
      }
      @keyframes move {
          100% {
              transform: translateY(calc(-50% + 100px)) translateZ(calc(100vh + 120px)) rotateX(90deg);
          }
      }

      这样，整个动画的雏形就完成了，通过控制父元素的 perspective 大小和容器的 translateZ，得到了一种不断向视角面前位移的动画效果：

      

      CodePen Demo -- CSS 3D Effect Demo

      结合 CSS @scroll-timeline，利用 CSS 控制滚动与动画

      那怎么利用 CSS 再把这个动画和滚动操作结合起来呢？

      在前不久，我介绍过 CSS 的一个重磅特性 来了来了，它终于来了，动画杀手锏 @scroll-timeline，利用它可以实现 CSS 动画与滚动操作的结合，我们利用它改造一下代码：

      <div></div>
      <div>
          <div>
              <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
              // ... 重复 N 个
          </div>
      </div>

      @property --phase {
        syntax: '<length>';
        inherits: false;
        initial-value: 15px;
      }
      .g-scroll {
          width: 100%;
          height: 1000vh;
      }
      .g-wrapper {
          position: fixed;
          width: 100vw;
          height: 100vh;
          perspective: 200px;
          transform-style: preserve-3d;
      }
      .g-inner {
          position: relative;
          height: 100%;
          // 省略一些 flex 布局代码，与上文一致
          transform-style: preserve-3d;
          transform: translateY(calc(-50% + 100px)) translateZ(var(--phase)) rotateX(90deg);
          transform-origin: bottom center;
          animation-name: move;
          animation-duration: 1s;
          animation-timeline: box-move;
      }
      .g-item {
          width: 300px;
          height: 200px;
          color: #fff;
          background: #000;
          transform: rotateX(-90deg);
      }
      @scroll-timeline box-move {
          source: selector("#g-scroll");
          orientation: "vertical";
      }
      @keyframes move {
          0% {
              --phase: 0;
          }
          100% {
              --phase: calc(100vh + 100px);
          }
      }</length>

      这里相比上述的 DEMO，主要添加了 @scroll-timeline 的代码，我们增加了一个超长容器 .g-scroll，并且把它的滚动动作使用 @scroll-timeline box-move {} 规则和 animation-timeline: box-move 绑定了起来，这样，我们可以使用滚动去触发 @keyframes move {} CSS 动画。

      效果如下：

      

      在原效果中，还有一些使用 JavaScript 结合滚动距离控制的模糊的变化，这个，我们使用 backdrop-filter: blur() 也可以简单模拟。我们再简单添加一层 g-mask：

      <div></div>
      <div>
          <div></div>
          <div>
              <div>Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
              // ... 重复 N 个
          </div>
      </div>

      // 其他保持一致
      .g-mask {
          position: fixed;
          width: 100vw;
          height: 100vh;
          backdrop-filter: blur(5px);
          transform: translateZ(0);
      }

      这样，基本就还原了原效果，并且，我们用且仅使用了 CSS：

      

      CodePen Demo -- Pure CSS Scroll Animation 2（Chrome Only && Support ScrollTimeline）

      总结一下

      当然，本文后一个效果中，使用了非常多目前兼容性还非常差的 CSS 属性，尤其是 @scroll-timeline，仍然处于非常早期的阶段，兼容性一片红。但是不妨碍我们学习、感受 CSS 的美好。

      要完全读懂本文，可能有一些前置知识需要了解，根据需要，你可以延伸阅读下：

      • CSS 实现视差效果
      • CSS @property，让不可能变可能
      • 来了来了，它终于来了，动画杀手锏 @scroll-timeline
      • 深入探讨 filter 与 backdrop-filter 的异同

      好了，本文到此结束，希望对你有帮助 

      原文地址：https://www.cnblogs.com/coco1s/p/16158555.html

      저자: ChokCoco

      더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS 실용적인 팁: 시차를 사용하여 멋진 대화형 효과 얻기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!