資訊專欄INFORMATION COLUMN
摘要：可以感受下種不同取值的不同效果使用實現(xiàn)滾動視差首先，我們使用來實現(xiàn)滾動視差。
視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 作為網(wǎng)頁設(shè)計的熱點趨勢，越來越多的網(wǎng)站應(yīng)用了這項技術(shù)。
通常而言，滾動視差在前端需要輔助 Javascript 才能實現(xiàn)。當然，其實 CSS 在實現(xiàn)滾動視差效果方面，也有著不俗的能力。下面就讓我們來見識一二：
background-attachmentbackground-attachment?算是一個比較生僻的屬性，基本上平時寫業(yè)務(wù)樣式都用不到這個屬性。但是它本身很有意思。
background-attachment：如果指定了?background-image?，那么?background-attachment?決定背景是在視口中固定的還是隨著包含它的區(qū)塊滾動的。
單單從定義上有點難以理解，隨下面幾個 Demo 了解下?background-attachment?到底是什么意思：
background-attachment: scrollscroll?此關(guān)鍵字表示背景相對于元素本身固定， 而不是隨著它的內(nèi)容滾動。
background-attachment: locallocal?此關(guān)鍵字表示背景相對于元素的內(nèi)容固定。如果一個元素擁有滾動機制，背景將會隨著元素的內(nèi)容滾動， 并且背景的繪制區(qū)域和定位區(qū)域是相對于可滾動的區(qū)域而不是包含他們的邊框。
background-attachment: fixedfixed?此關(guān)鍵字表示背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。
注意一下 scroll 與 fixed，一個是相對元素本身固定，一個是相對視口固定，有點類似?
position?定位的?absolute?和?fixed。
可以感受下 3 種不同取值的不同效果：
CodePen Demo -- bg-attachment Demo
background-attachment: fixed?實現(xiàn)滾動視差首先，我們使用?background-attachment: fixed?來實現(xiàn)滾動視差。fixed?此關(guān)鍵字表示背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。
這里的關(guān)鍵在于，即使一個元素擁有滾動機制，背景也不會隨著元素的內(nèi)容滾動。也就是說，背景圖從一開始就已經(jīng)被固定死在初始所在的位置。
我們使用，圖文混合排布的方式，實現(xiàn)滾動視差，HTML 結(jié)構(gòu)如下，.g-word?表示內(nèi)容結(jié)構(gòu)，.g-img?表示背景圖片結(jié)構(gòu)：
Header IMG1 Content1 IMG2 Content2 IMG3 Footer
關(guān)鍵 CSS：
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
效果如下：
CodePen Demo -- https://codepen.io/Chokcoco/pen/JBaQoY
嗯？有點神奇，為什么會是這樣呢？可能很多人會和我一樣，第一次接觸這個屬性對這樣的效果感到懵逼。
我們把上面?background-attachment: fixed?注釋掉，或者改為?background-attachment: local，再看看效果：
CodePen Demo -- bg-attachment:local
這次，圖片正常跟隨滾動條滾動了，按常理，這種效果才符合我們大腦的思維。
而滾動視差效果，正是不按常理出牌的一個效果，重點來了：
當頁面滾動到圖片應(yīng)該出現(xiàn)的位置，被設(shè)置了?background-attachment: fixed?的圖片并不會繼續(xù)跟隨頁面的滾動而跟隨上下移動，而是相對于視口固定死了。
好，我們再來試一下，如果把所有?.g-word?內(nèi)容區(qū)塊都去掉，只剩下全部設(shè)置了?background-attachment: fixed?的背景圖區(qū)塊，會是怎么樣呢？
HTML 代碼如下：
IMG1 IMG2 IMG3
section {
height: 100vh;
}
.g-img {
background-image: url(...);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
效果如下：
CodePen Demo
結(jié)合這張 GIF，相信能對?background-attachment: fixed?有個更深刻的認識，移動的只有視口，而背景圖是一直固定死的。
綜上，就是 CSS 使用?background-attachment: fixed?實現(xiàn)滾動視差的一種方式，也是相對而言比較容易的一種。當然，background-attachment: fixed?本身的效果并不僅只是能有用來實現(xiàn)滾動視差效果，合理運用，還可以實現(xiàn)其他很多有趣的效果，這里簡單再列一個：
?
background-attachment: fixed?實現(xiàn)圖片點擊水紋效果利用圖片相對視口固定，可以有很多有趣的效果，譬如下面這個，來源于這篇文章CSS Water Wave (水波效果)：
CodePen Demo -- bg-attachment:fixed Wave
利用圖片相對視口固定的特性實現(xiàn)點擊的水紋效果。
上面這個效果有點瑕疵，圖片在放大容器變大的過程中發(fā)生了明顯的抖動。當然，效果還是可以的，
background-attachment?還有很多有意思的效果可以挖掘。
transform: translate3d?實現(xiàn)滾動視差言歸正傳，下面介紹另外一種使用 CSS 實現(xiàn)的滾動視差效果，利用的是 CSS 3D。
原理就是：
我們給容器設(shè)置上?transform-style: preserve-3d?和?perspective: xpx，那么處于這個容器的子元素就將位于3D空間中，
再給子元素設(shè)置不同的?transform: translateZ()，這個時候，不同元素在 3D Z軸方向距離屏幕（我們的眼睛）的距離也就不一樣
滾動滾動條，由于子元素設(shè)置了不同的?transform: translateZ()，那么他們滾動的上下距離?translateY?相對屏幕（我們的眼睛），也是不一樣的，這就達到了滾動視差的效果。
關(guān)于?
transform-style: preserve-3d?以及?perspective?本文不做過多篇幅展開，默認讀者都有所了解，還不是特別清楚的，可以先了解下 CSS 3D。
核心代碼表示就是：
translateZ(-1)translateZ(-2)translateZ(-3)
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
很明顯，當滾動滾動條時，不同子元素的位移程度從視覺上看是不一樣的，也就達到了所謂的滾動視差效果。
那么，運用 translate3d 的視差效果，又能有一些什么好玩的效果呢？下面這個滾動視差文字陰影/虛影效果很有意思：
CodePen Demo -- CSS translate3d Parallax
當然，通過調(diào)整參數(shù)（perspective: ?px?以及?transform: translateZ(-?px);），還能有其他很有意思的效果出現(xiàn)：
CodePen Demo -- CSS translate3d Parallax 2
是不是很有電影開片的廠商 LOGO 的特效的感覺??。
師父領(lǐng)進門，修行在個人，怎么制作更好更有意思的效果還是需要花時間鉆研和琢磨，這里我僅僅是拋磚引玉，希望能見到更多 Nice 的效果。
?
感謝耐心讀完。更多精彩 CSS 技術(shù)文章匯總在我的?Github -- iCSS?，持續(xù)更新，歡迎點個 star 訂閱收藏。
好了，本文到此結(jié)束，希望對你有幫助 :)
如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
?
?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1935.html
摘要：通常而言，滾動視差在前端需要輔助才能實現(xiàn)。當然，其實在實現(xiàn)滾動視差效果方面，也有著不俗的能力。此關(guān)鍵字表示背景相對于視口固定。使用實現(xiàn)滾動視差言歸正傳，下面介紹另外一種使用實現(xiàn)的滾動視差效果，利用的是。? ? 何為滾動視差 視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 作為網(wǎng)頁設(shè)計的熱點趨勢，越來越多的網(wǎng)站應(yīng)...
摘要：變換視差滾動效果學(xué)習(xí)在學(xué)習(xí)如何做到視差滾動效果時，閱讀了張鑫旭老師的文章，記錄下學(xué)習(xí)視差滾動變換的幾個理解點。視差滾動中的計算，畫一個草圖即可得知，是舞臺視覺平面抬起向你而來的距離，而是元素后退的距離離你而去，所以 CSS3 3D transform變換 視差滾動效果學(xué)習(xí) 在學(xué)習(xí)css如何做到視差滾動效果時，閱讀了張鑫旭老師的文章，記錄下學(xué)習(xí)視差滾動 and 3D transform變...
摘要：練習(xí)視差滾動例子介紹一下視差指網(wǎng)頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網(wǎng)頁展示技術(shù)。背景圖像會隨著頁面其余部分的滾動而移動。 練習(xí)視差滾動例子 介紹一下視差 指網(wǎng)頁滾動過程中，多層次的元素進行不同程度的移動，視覺上形成立體運動效果的網(wǎng)頁展示技術(shù)。通過前景與背景在場景移動時產(chǎn)生不同的視差，從而達到簡單的立體效果 說的簡單點就是網(wǎng)頁內(nèi)的元素在滾動屏幕時發(fā)生...
摘要：求一個元素左上角相對于屏幕的位置獲取元素相對于屏幕絕對位置如果瀏覽器兼容此方法注意，是對象的方法如果不用對象，可以使用分支。 js視差效果 showImg(https://segmentfault.com/img/bVX4PB?w=813&h=664); 1.思路： 鼠標在圖片上上下左右滑動時,讓圖片整體轉(zhuǎn)動,轉(zhuǎn)動方向與鼠標移動的方向相同,轉(zhuǎn)動角度大小正相關(guān)于鼠標離開圖像中心點的水平或...
摘要：近些年討論得很熱烈的設(shè)計趨勢是視覺差滾動效果。在本教程中，我會介紹視覺差滾動和用插件來制作視覺差滾動效果。如果你想使用，可以通過以下命令下載好后，在頁面中引用完成后，開始給頁面添加視覺差滾動效果。在一個頁面運用創(chuàng)建一個視差滾動效果的示例。 近些年討論得很熱烈的設(shè)計趨勢是視覺差滾動效果。不管你喜不喜歡，很多網(wǎng)站都在用它。在本教程中，我會介紹視覺差滾動和用jQuery插件Stellar.j...
閱讀 3187·2021-11-23 09:51
閱讀 1524·2021-11-22 09:34
閱讀 2836·2021-10-27 14:15
閱讀 2265·2021-10-12 10:17
閱讀 1884·2021-10-12 10:12
閱讀 946·2021-09-27 14:00
閱讀 1996·2021-09-22 15:19
閱讀 1032·2019-08-30 10:51
