CSS の実践的なヒント: 視差を使用してクールなインタラクティブ効果を実現する

この記事では、CSS を使用してスクロール視差効果を実現するためのちょっとしたトリックを紹介し、このトリックを使用して興味深いインタラクティブな特殊効果を作成します。 [学習ビデオ共有: css ビデオ チュートリアル 、web フロントエンド ]

CSS を使用してスクロール視差効果を実現することについては、以前の記事で説明しています。具体的なソリューションの詳細 - 視差効果を達成するための CSS 、興味のある学生は最初にこの記事を読むことができます。

ここでは、純粋な CSS 視差テクニックが使用されます:

Use transform: translation3d を使用してスクロール視差を実現します

ここでは CSS が使用され、3D を実現します。スクロール視差効果。

原則は次のとおりです:

• transform-style:preserve-3d と perspective: xpx をコンテナに設定します。 , すると、このコンテナ内の子要素が 3D 空間に配置されます。

• 次に、子要素に対して別の transform: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: translationZ を設定し、スクロール バーをスクロールすると、次のような効果が得られます:

CodePen デモ-- CSS 3D 視差

明らかに、スクロール バーがスクロールされると、さまざまなサブ要素の変位の程度が視覚的に異なり、いわゆるスクロール視差効果が得られます。

CSS パララックスを使用してクールなインタラクティブ効果を実現する

OK、上記の基礎を踏まえて、これら 2 つの興味深いインタラクティブ効果を見てみましょう。グループ内の

#日サーバー No.1 カッターであるwheatup から提供されました。 まず最初の効果を見てみましょう:

この効果は、テキストが異なる高さのレイヤーに交互に表示され、スクロール プロセス中に、明らかな 3D 視差効果があります。

このエフェクトは難しいものではありません。核心は次のとおりです:

• transform-style:preserve-3d

  と perspective## の使用# さまざまなレベルの効果を構築し、視差効果を作成します

  要素の
::before
• 、

  ::after を使用して 3D 効果を作成します

  最小化されたデモを見てみましょう:

<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) であるため、 2 つの疑似要素 ## は正と負の 90deg、高さは 200px であるため、g-box と g-normal 渡すだけです g-box の 2 つの擬似要素が接続されます最終的に、効果は上記のようになります:

デモの完全なコード:

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 中国語 Web サイトの他の関連記事を参照してください。