[轉]滾動視差?CSS 不在話下/background attachment

来源:https://www.cnblogs.com/Elgant/archive/2018/09/05/9592451.html
-Advertisement-
Play Games

何為滾動視差 視差滾動(Parallax Scrolling)是指讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。 作為網頁設計的熱點趨勢,越來越多的網站應用了這項技術。 通常而言,滾動視差在前端需要輔助 Javascript 才能實現。當然,其實 CSS 在實現滾動視差效果 ...


 

 

何為滾動視差

視差滾動(Parallax Scrolling)是指讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。 作為網頁設計的熱點趨勢,越來越多的網站應用了這項技術。

parallax

通常而言,滾動視差在前端需要輔助 Javascript 才能實現。當然,其實 CSS 在實現滾動視差效果方面,也有著不俗的能力。下麵就讓我們來見識一二:

 

認識 background-attachment

background-attachment 算是一個比較生僻的屬性,基本上平時寫業務樣式都用不到這個屬性。但是它本身很有意思。

background-attachment:如果指定了 background-image ,那麼 background-attachment 決定背景是在視口中固定的還是隨著包含它的區塊滾動的。

單單從定義上有點難以理解,隨下麵幾個 Demo 瞭解下 background-attachment 到底是什麼意思:

background-attachment: scroll

scroll 此關鍵字表示背景相對於元素本身固定, 而不是隨著它的內容滾動。

background-attachment: local

local 此關鍵字表示背景相對於元素的內容固定。如果一個元素擁有滾動機制,背景將會隨著元素的內容滾動, 並且背景的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。

background-attachment: fixed

fixed 此關鍵字表示背景相對於視口固定。即使一個元素擁有滾動機制,背景也不會隨著元素的內容滾動。

註意一下 scroll 與 fixed,一個是相對元素本身固定,一個是相對視口固定,有點類似 position 定位的 absolute 和 fixed

可以感受下 3 種不同取值的不同效果:

CodePen Demo -- bg-attachment Demo

 

使用 background-attachment: fixed 實現滾動視差

首先,我們使用 background-attachment: fixed 來實現滾動視差。fixed 此關鍵字表示背景相對於視口固定。即使一個元素擁有滾動機制,背景也不會隨著元素的內容滾動。

這裡的關鍵在於,即使一個元素擁有滾動機制,背景也不會隨著元素的內容滾動。也就是說,背景圖從一開始就已經被固定死在初始所在的位置。

我們使用,圖文混合排布的方式,實現滾動視差,HTML 結構如下,.g-word 表示內容結構,.g-img 表示背景圖片結構:

1 2 3 4 5 6 7 <section class="g-word">Header</section> <section class="g-img">IMG1</section> <section class="g-word">Content1</section> <section class="g-img">IMG2</section> <section class="g-word">Content2</section> <section class="g-img">IMG3</section> <section class="g-word">Footer</section>

關鍵 CSS:

1 2 3 4 5 6 7 8 9 10 section {     height100vh; }   .g-img {     background-imageurl(...);     background-attachmentfixed;     background-size: cover;     background-positioncenter center; }

效果如下:

parallax background-attachment: fixed

CodePen Demo -- https://codepen.io/Chokcoco/pen/JBaQoY

嗯?有點神奇,為什麼會是這樣呢?可能很多人會和我一樣,第一次接觸這個屬性對這樣的效果感到懵逼。

我們把上面 background-attachment: fixed 註釋掉,或者改為 background-attachment: local,再看看效果:

parallax background-attachment: fixed 2

CodePen Demo -- bg-attachment:local

這次,圖片正常跟隨滾動條滾動了,按常理,這種效果才符合我們大腦的思維。

而滾動視差效果,正是不按常理出牌的一個效果,重點來了:

當頁面滾動到圖片應該出現的位置,被設置了 background-attachment: fixed 的圖片並不會繼續跟隨頁面的滾動而跟隨上下移動,而是相對於視口固定死了。

好,我們再來試一下,如果把所有 .g-word 內容區塊都去掉,只剩下全部設置了 background-attachment: fixed 的背景圖區塊,會是怎麼樣呢?

HTML 代碼如下:

1 2 3 <section class="g-img">IMG1</section> <section class="g-img">IMG2</section> <section class="g-img">IMG3</section>
1 2 3 4 5 6 7 8 9 10 section {     height100vh; }   .g-img {     background-imageurl(...);     background-attachmentfixed;     background-size: cover;     background-positioncenter center; }

效果如下:

parallax background-attachment: fixed 3

CodePen Demo

結合這張 GIF,相信能對 background-attachment: fixed 有個更深刻的認識,移動的只有視口,而背景圖是一直固定死的。

綜上,就是 CSS 使用 background-attachment: fixed 實現滾動視差的一種方式,也是相對而言比較容易的一種。當然,background-attachment: fixed 本身的效果並不僅只是能有用來實現滾動視差效果,合理運用,還可以實現其他很多有趣的效果,這裡簡單再列一個:

 

background-attachment: fixed 實現圖片點擊水紋效果

利用圖片相對視口固定,可以有很多有趣的效果,譬如下麵這個,來源於這篇文章CSS Water Wave (水波效果)

background-attachment: fixed Wave

CodePen Demo -- bg-attachment:fixed Wave

利用圖片相對視口固定的特性實現點擊的水紋效果。

上面這個效果有點瑕疵,圖片在放大容器變大的過程中發生了明顯的抖動。當然,效果還是可以的,background-attachment 還有很多有意思的效果可以挖掘。

 

使用 transform: translate3d 實現滾動視差

言歸正傳,下麵介紹另外一種使用 CSS 實現的滾動視差效果,利用的是 CSS 3D。

原理就是:

  1. 我們給容器設置上 transform-style: preserve-3d 和 perspective: xpx,那麼處於這個容器的子元素就將位於3D空間中,

  2. 再給子元素設置不同的 transform: translateZ(),這個時候,不同元素在 3D Z軸方向距離屏幕(我們的眼睛)的距離也就不一樣

  3. 滾動滾動條,由於子元素設置了不同的 transform: translateZ(),那麼他們滾動的上下距離 translateY 相對屏幕(我們的眼睛),也是不一樣的,這就達到了滾動視差的效果。

關於 transform-style: preserve-3d 以及 perspective 本文不做過多篇幅展開,預設讀者都有所瞭解,還不是特別清楚的,可以先瞭解下 CSS 3D。

核心代碼表示就是:

1 2 3 4 5 <div class="g-container">     <div class="section-one">translateZ(-1)</div>     <div class="section-two">translateZ(-2)</div>     <div class="section-three">translateZ(-3)</div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 html {     height100%;     overflowhidden; }   body {     perspective: 1px;     transform-style: preserve-3d;     height100%;     overflow-y: scroll;     overflow-x: hidden; }   .g-container {     height150%;       .section-one {         transform: translateZ(-1px);     }     .section-two {         transform: translateZ(-2px);     }     .section-three {         transform: translateZ(-3px);     } }

總結就是父元素設置 transform-style: preserve-3d 和 perspective: 1px,子元素設置不同的 transform: translateZ,滾動滾動條,效果如下:

css3dparallax

CodePen Demo -- CSS 3D parallax

很明顯,當滾動滾動條時,不同子元素的位移程度從視覺上看是不一樣的,也就達到了所謂的滾動視差效果。

滾動視差文字陰影/虛影效果

那麼,運用 translate3d 的視差效果,又能有一些什麼好玩的效果呢?下麵這個滾動視差文字陰影/虛影效果很有意思:

csstparallax

 

CodePen Demo -- CSS translate3d Parallax

當然,通過調整參數(perspective: ?px 以及 transform: translateZ(-?px);),還能有其他很有意思的效果出現:

csstparallax2

CodePen Demo -- CSS translate3d Parallax 2

是不是很有電影開片的廠商 LOGO 的特效的感覺 joy 。

師父領進門,修行在個人,怎麼製作更好更有意思的效果還是需要花時間鑽研和琢磨,這裡我僅僅是拋磚引玉,希望能見到更多 Nice 的效果。

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 哈哈哈,我又又又回來了,不好意思,最近枸杞喝的比較到位,精力比較旺盛。 現在我們來聊一聊啥是回調地獄,註意是回調地獄啊 不是RB人民最愛拍的那啥地獄啊,來吧,上車吧少年,這是去幼兒園的車 都讓開,我要上高清無碼大圖了啊,青少年註意避讓 ...
  • 一.javaScript(以下簡稱js)的歷史 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟體中).後將其改名ScriptEase.(客戶端執行的語言) Netscape(網景)接收Nombas的理念,(Brendan Eich)在其Net ...
  • 參考博文:https://www.cnblogs.com/zhenfei-jiang/p/7065038.html 按照網上查找的資料敲了代碼 出現的問題 : 輸入一個key就執行send方法發送數據給伺服器,還沒輸入完就發送了。 後來換了一種方法 也出現了問題,識別不到回車keycode,隨意按其 ...
  • auto-workflow 用於快速構建各種關係圖的庫,比如流程圖,可視化執行流等 github地址:https://github.com/auto-workflow/AWorkflow 快速開始 npm install aworkflow 或者引用dist文件夾下的產出文件 訪問demo npm ...
  • 來自 https://www.cnblogs.com/lhl66/p/9555903.html 侵刪 來自 https://www.cnblogs.com/lhl66/p/8862106.html 侵刪 1. let, const 都是塊級作用域, 其有效範圍僅在代碼塊中。 //es5 if (a ... ...
  • 首先現在Vue中引入clipboard 在需要使用的組件中import 引入clipboard clipboard的實際使用 不論是單按鈕複製還是多按鈕複製,一定要在頁面載入DOM完成後先New出來具有複製功能的按鈕,如果在函數內再New那麼可能會出現點擊複製按鈕兩次,才複製成功的現象,如下: 綁定 ...
  • 在app.modlues.ts文件中修改 ...
  • //來自 https://www.cnblogs.com/lhl66/p/8021730.html 侵刪el:element 需要獲取的元素,一定是HTML中的根容器元素 data:用於數據的存儲 methods:用於存儲各種方法 數據綁定字面量只載入一次{{* msg}} data裡面可以進行簡單 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...