Petua praktikal CSS: Gunakan paralaks untuk mencapai kesan interaktif yang hebat-tutorial css-php.cn

Petua praktikal CSS: Gunakan paralaks untuk mencapai kesan interaktif yang hebat

Artikel ini akan memperkenalkan sedikit helah untuk menggunakan CSS untuk mencapai kesan paralaks tatal, dan menggunakan helah ini untuk mencipta beberapa kesan interaktif yang menarik. [Belajar perkongsian video: tutorial video css, bahagian hadapan web]

Berkenaan menggunakan CSS untuk mencapai kesan paralaks tatal, terdapat artikel sebelumnya yang menerangkan tentang penyelesaian khusus secara terperinci - CSS untuk mencapai kesan paralaks, pelajar yang berminat boleh membaca artikel ini terlebih dahulu.

Di sini, teknik paralaks CSS tulen akan digunakan:

Gunakan `transform: translate3d` untuk mencapai paralaks penatalan

Di sini kita akan menggunakan CSS 3D untuk mencapai kesan paralaks penatalan .

Prinsipnya ialah:

Kami menetapkan transform-style: preserve-3d dan perspective: xpx pada bekas, kemudian elemen anak dalam bekas ini akan terletak di ruang 3D,
Kemudian tetapkan transform: translateZ() berbeza untuk elemen kanak-kanak Pada masa ini, jarak elemen berbeza dari skrin (mata kita) dalam arah paksi Z 3D juga berbeza <.>
Bar tatal, kerana elemen kanak-kanak ditetapkan kepada
berbeza, maka jarak atas dan bawah tatal mereka transform: translateZ() berbanding skrin (mata kita) juga berbeza, yang mencapai paralaks tatal. translateY

Mengenai
dan transform-style: preserve-3d Artikel ini diandaikan bahawa pembaca sudah mengetahuinya boleh faham CSS 3D dulu. perspective

Perwakilan kod teras ialah:

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

Salin selepas log masuk

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

Salin selepas log masuk

Ringkasannya ialah elemen induk menetapkan

dan transform-style: preserve-3d, elemen anak menetapkan berbeza perspective: 1px, tatal bar skrol, kesannya adalah seperti berikut: transform: translateZ

Petua praktikal CSS: Gunakan paralaks untuk mencapai kesan interaktif yang hebat

Demo CodePen -- CSS 3D paralaks

Jelas sekali, apabila menatal bar skrol, sari kata yang berbeza Tahap anjakan unsur secara visual berbeza, mencapai apa yang dipanggil kesan paralaks menatal.

Gunakan paralaks CSS untuk mencapai kesan interaktif yang hebat

OK, dengan asas di atas, mari kita lihat dua kesan interaktif yang menarik ini. Ihsan wheatup,

pemotong pertama pelayan Jepun dalam kumpulan.

Mari kita lihat kesan pertama dahulu:

Kesannya ialah teks dipaparkan secara berselang-seli dalam lapisan ketinggian yang berbeza, dan semasa proses menatal, ia akan Terdapat kesan paralaks 3D yang jelas.

Kesan ini tidak sukar Intinya terletak pada:

Menggunakan
dan transform-style: preserve-3d untuk membina kesan lapisan yang berbeza dan mencipta kesan paralaksperspective
Menggunakan elemen
dan ::before untuk mencipta kesan 3D::after

Mari kita lihat DEMO yang minimum:

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

Salin selepas log masuk

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

Salin selepas log masuk

Tatal bekas

untuk mendapatkan kesan 3D: g-container

Memandangkan kita juga memerlukan kesan paralaks, kita perlu memberikan lapisan berbeza yang berbeza

, mari kita ubah suai sedikit kod, tambah lapisan tambahan translateZ() biasa di tengah setiap g-box, dan kemudian tambahkan div pada setiap g-box. translateZ()

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

Salin selepas log masuk

.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 {
        // ... 保持不变
    }
}

Salin selepas log masuk

Memandangkan nilai translateZ bagi
dan g-box adalah berbeza, kesan paralaks akan muncul semasa proses menatal g-normal
Memandangkan nilai
g-box ialah translateZ, translateZ(200px) daripada dua unsur pseudo ialah positif dan negatif rotateX, dan ketinggian ialah 90deg, jadi 200px dan g-box hanya boleh melepasi disambungkan g-normalg-box

Kod lengkap DEMO:

Demo CodePen - Tatal Parallax 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>

Salin selepas log masuk

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

Salin selepas log masuk

大概是这个效果：

然后，我们添加一些 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;
}

Salin selepas log masuk

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

由于容器 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);
}

Salin selepas log masuk

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

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

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

Salin selepas log masuk

这样，整个动画的雏形就完成了，通过控制父元素的 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>

Salin selepas log masuk

@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>

Salin selepas log masuk

这里相比上述的 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>

Salin selepas log masuk

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

Salin selepas log masuk

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

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

总结一下

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

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

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

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

Pengarang: ChokCoco

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Video Pengaturcaraan! !

Atas ialah kandungan terperinci Petua praktikal CSS: Gunakan paralaks untuk mencapai kesan interaktif yang hebat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!