本篇內(nèi)容介紹了“CSS怎么利用視差實(shí)現(xiàn)酷炫交互動效”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了江安免費(fèi)建站歡迎大家使用！
重慶分公司
重慶分公司
transform: translate3d 實(shí)現(xiàn)滾動視差這里利用的是 CSS 3D，實(shí)現(xiàn)滾動視差效果。
原理就是：
我們給容器設(shè)置上 transform-style: preserve-3d 和 perspective: xpx，那么處于這個容器的子元素就將位于3D空間中，
再給子元素設(shè)置不同的 transform: translateZ()，這個時候，不同元素在 3D Z軸方向距離屏幕（我們的眼睛）的距離也就不一樣
滾動滾動條，由于子元素設(shè)置了不同的 transform: translateZ()，那么他們滾動的上下距離 translateY 相對屏幕（我們的眼睛），也是不一樣的，這就達(dá)到了滾動視差的效果。
關(guān)于
transform-style: preserve-3d以及perspective本文不做過多篇幅展開，默認(rèn)讀者都有所了解，還不是特別清楚的，可以先了解下 CSS 3D。
核心代碼表示就是：
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);
}
}總結(jié)就是父元素設(shè)置 transform-style: preserve-3d 和 perspective: 1px，子元素設(shè)置不同的 transform: translateZ，滾動滾動條，效果如下：
CodePen Demo -- CSS 3D parallax
很明顯，當(dāng)滾動滾動條時，不同子元素的位移程度從視覺上看是不一樣的，也就達(dá)到了所謂的滾動視差效果。
OK，有了上面的鋪墊，我們來看看這樣兩個有趣的交互效果。由群里的日服第一切圖仔wheatup 友情提供。
先來看第一個效果：
效果是一種文本交替在不同高度的層展示，并且在滾動的過程中，會有明顯的 3D 視差效果。
這個效果并不困難，核心就在于：
利用了 transform-style: preserve-3d 和 perspective 構(gòu)建不同的層次效果，制作視差效果
利用元素的 ::before，::after 構(gòu)建了 3D 的效果
我們看一個最小化 DEMO：
.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()。
.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 值不同，所以滾動的過程中會出現(xiàn)視差效果
由于 g-box 的 translateZ 值為 translateZ(200px)，兩個偽元素的 rotateX 為正負(fù) 90deg，且高度為 200px，因此 g-box 和 g-normal 剛好可以通過 g-box 的兩個偽元素銜接起來
最終，效果就是如上所示：
OK，下面第二個滾動視差動畫，也非常的有意思，想看看原版，也是來自于 wheatup 的 CodePen：
CodePen Demo -- 3D Chat Viewer
這里核心還是借助了 CSS 3D 的能力，但是由于使用的是滾動觸發(fā)動畫效果，并且有一定的從模糊到清晰的漸現(xiàn)效果，因此還是有一定的 JavaScript 代碼。
感興趣的可以看看上述的源碼。
本文將嘗試使用 CSS @Property 和 CSS 最新的特性 @scroll-timeline 還原該效果借助 JavaScript 實(shí)現(xiàn)的部分。
當(dāng)然，首先不管是否需要借助 JavaScript，核心的 3D 部分使用的都是 CSS。
我們首先需要這樣一個結(jié)構(gòu)：
.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 進(jìn)行了一個繞 X 軸的 90deg 翻轉(zhuǎn)，也就是 rotateX(90deg)，所以，我們再給 g-item 一個反向的旋轉(zhuǎn)，把卡片翻轉(zhuǎn)回來：
.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，得到了一種不斷向視角面前位移的動畫效果：
那怎么利用 CSS 再把這個動畫和滾動操作結(jié)合起來呢？
在前不久，我介紹過 CSS 的一個重磅特性 來了來了，它終于來了，動畫殺手锏 @scroll-timeline，利用它可以實(shí)現(xiàn) CSS 動畫與滾動操作的結(jié)合，我們利用它改造一下代碼：
@property --phase {
syntax: '
這里相比上述的 DEMO，主要添加了 @scroll-timeline 的代碼，我們增加了一個超長容器 .g-scroll，并且把它的滾動動作使用 @scroll-timeline box-move {} 規(guī)則和 animation-timeline: box-move 綁定了起來，這樣，我們可以使用滾動去觸發(fā) @keyframes move {} CSS 動畫。
效果如下：
在原效果中，還有一些使用 JavaScript 結(jié)合滾動距離控制的模糊的變化，這個，我們使用 backdrop-filter: blur() 也可以簡單模擬。我們再簡單添加一層 g-mask：
// 其他保持一致
.g-mask {
position: fixed;
width: 100vw;
height: 100vh;
backdrop-filter: blur(5px);
transform: translateZ(0);
}
這樣，基本就還原了原效果，并且，我們用且僅使用了 CSS：
“CSS怎么利用視差實(shí)現(xiàn)酷炫交互動效”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！
