整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者：伯樂在線/chokcoco
http://web.jobbole.com/95068/
何為滾動視差
視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 作為網頁設計的熱點趨勢，越來越多的網站應用了這項技術。
通常而言，滾動視差在前端需要輔助 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（https://codepen.io/Chokcoco/pen/xJJorg）
使用 background-attachment: fixed 實現滾動視差
首先，我們使用 background-attachment: fixed 來實現滾動視差。fixed 此關鍵字表示背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動。
這里的關鍵在于，即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動。也就是說，背景圖從一開始就已經被固定死在初始所在的位置。
我們使用，圖文混合排布的方式，實現滾動視差，HTML 結構如下，.g-word 表示內容結構，.g-img 表示背景圖片結構：
<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：
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（https://codepen.io/Chokcoco/pen/JBaQoY）
嗯？有點神奇，為什么會是這樣呢？可能很多人會和我一樣，第一次接觸這個屬性對這樣的效果感到懵逼。
我們把上面 background-attachment: fixed 注釋掉，或者改為 background-attachment: local，再看看效果：
CodePen Demo — bg-attachment:local（https://codepen.io/Chokcoco/pen/ZjMdJz）
這次，圖片正常跟隨滾動條滾動了，按常理，這種效果才符合我們大腦的思維。
而滾動視差效果，正是不按常理出牌的一個效果，重點來了：
當頁面滾動到圖片應該出現的位置，被設置了 background-attachment: fixed 的圖片并不會繼續跟隨頁面的滾動而跟隨上下移動，而是相對于視口固定死了。
好，我們再來試一下，如果把所有 .g-word 內容區塊都去掉，只剩下全部設置了 background-attachment: fixed 的背景圖區塊，會是怎么樣呢？
HTML 代碼如下：
<section class="g-img">IMG1</section>
<section class="g-img">IMG2</section>
<section class="g-img">IMG3</section>
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/oMPrGZ）
結合這張 GIF，相信能對 background-attachment: fixed 有個更深刻的認識，移動的只有視口，而背景圖是一直固定死的。
綜上，就是 CSS 使用 background-attachment: fixed 實現滾動視差的一種方式，也是相對而言比較容易的一種。當然，background-attachment: fixed 本身的效果并不僅只是能有用來實現滾動視差效果，合理運用，還可以實現其他很多有趣的效果，這里簡單再列一個：
background-attachment: fixed 實現圖片點擊水紋效果
利用圖片相對視口固定，可以有很多有趣的效果，譬如下面這個，來源于這篇文章CSS Water Wave (水波效果)：
CodePen Demo — bg-attachment:fixed Wave（https://codepen.io/Chokcoco/pen/wxYZWO）
利用圖片相對視口固定的特性實現點擊的水紋效果。
上面這個效果有點瑕疵，圖片在放大容器變大的過程中發生了明顯的抖動。當然，效果還是可以的，background-attachment 還有很多有意思的效果可以挖掘。
使用 transform: translate3d 實現滾動視差
言歸正傳，下面介紹另外一種使用 CSS 實現的滾動視差效果，利用的是 CSS 3D。
原理就是：
關于 transform-style: preserve-3d 以及 perspective 本文不做過多篇幅展開，默認讀者都有所了解，還不是特別清楚的，可以先了解下 CSS 3D。
核心代碼表示就是：
<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>
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: translateZ，滾動滾動條，效果如下：
CodePen Demo — CSS 3D parallax（https://codepen.io/Chokcoco/pen/EpOeRm）
很明顯，當滾動滾動條時，不同子元素的位移程度從視覺上看是不一樣的，也就達到了所謂的滾動視差效果。
滾動視差文字陰影/虛影效果
那么，運用 translate3d 的視差效果，又能有一些什么好玩的效果呢？下面這個滾動視差文字陰影/虛影效果很有意思：
CodePen Demo — CSS translate3d Parallax（https://codepen.io/Chokcoco/pen/XBgBBp）
當然，通過調整參數（perspective: ?px 以及 transform: translateZ(-?px);），還能有其他很有意思的效果出現：
CodePen Demo — CSS translate3d Parallax 2（https://codepen.io/Chokcoco/pen/PBXwdX）
是不是很有電影開片的廠商 LOGO 的特效的感覺 joy 。
師父領進門，修行在個人，怎么制作更好更有意思的效果還是需要花時間鉆研和琢磨，這里我僅僅是拋磚引玉，希望能見到更多 Nice 的效果。
好了，本文到此結束，希望對你有幫助 :)
為滾動視差
視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。 作為網頁設計的熱點趨勢，越來越多的網站應用了這項技術。
通常而言，滾動視差在前端需要輔助 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（https://codepen.io/Chokcoco/pen/xJJorg）
使用 background-attachment: fixed 實現滾動視差
首先，我們使用 background-attachment: fixed 來實現滾動視差。fixed 此關鍵字表示背景相對于視口固定。即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動。
這里的關鍵在于，即使一個元素擁有滾動機制，背景也不會隨著元素的內容滾動。也就是說，背景圖從一開始就已經被固定死在初始所在的位置。
我們使用，圖文混合排布的方式，實現滾動視差，HTML 結構如下，.g-word 表示內容結構，.g-img 表示背景圖片結構：
<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：
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（https://codepen.io/Chokcoco/pen/JBaQoY）
嗯？有點神奇，為什么會是這樣呢？可能很多人會和我一樣，第一次接觸這個屬性對這樣的效果感到懵逼。
我們把上面 background-attachment: fixed 注釋掉，或者改為 background-attachment: local，再看看效果：
CodePen Demo — bg-attachment:local（https://codepen.io/Chokcoco/pen/ZjMdJz）
這次，圖片正常跟隨滾動條滾動了，按常理，這種效果才符合我們大腦的思維。
而滾動視差效果，正是不按常理出牌的一個效果，重點來了：
當頁面滾動到圖片應該出現的位置，被設置了 background-attachment: fixed 的圖片并不會繼續跟隨頁面的滾動而跟隨上下移動，而是相對于視口固定死了。
好，我們再來試一下，如果把所有 .g-word 內容區塊都去掉，只剩下全部設置了 background-attachment: fixed 的背景圖區塊，會是怎么樣呢？
HTML 代碼如下：
<section class="g-img">IMG1</section> <section class="g-img">IMG2</section> <section class="g-img">IMG3</section>
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/oMPrGZ）
結合這張 GIF，相信能對 background-attachment: fixed 有個更深刻的認識，移動的只有視口，而背景圖是一直固定死的。
綜上，就是 CSS 使用 background-attachment: fixed 實現滾動視差的一種方式，也是相對而言比較容易的一種。當然，background-attachment: fixed 本身的效果并不僅只是能有用來實現滾動視差效果，合理運用，還可以實現其他很多有趣的效果，這里簡單再列一個：
background-attachment: fixed 實現圖片點擊水紋效果
利用圖片相對視口固定，可以有很多有趣的效果，譬如下面這個，來源于這篇文章CSS Water Wave (水波效果)：
CodePen Demo — bg-attachment:fixed Wave（https://codepen.io/Chokcoco/pen/wxYZWO）
利用圖片相對視口固定的特性實現點擊的水紋效果。
上面這個效果有點瑕疵，圖片在放大容器變大的過程中發生了明顯的抖動。當然，效果還是可以的，background-attachment 還有很多有意思的效果可以挖掘。
使用 transform: translate3d 實現滾動視差
言歸正傳，下面介紹另外一種使用 CSS 實現的滾動視差效果，利用的是 CSS 3D。
原理就是：
關于 transform-style: preserve-3d 以及 perspective 本文不做過多篇幅展開，默認讀者都有所了解，還不是特別清楚的，可以先了解下 CSS 3D。
核心代碼表示就是：
<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>
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: translateZ，滾動滾動條，效果如下：
CodePen Demo — CSS 3D parallax（https://codepen.io/Chokcoco/pen/EpOeRm）
很明顯，當滾動滾動條時，不同子元素的位移程度從視覺上看是不一樣的，也就達到了所謂的滾動視差效果。
滾動視差文字陰影/虛影效果
那么，運用 translate3d 的視差效果，又能有一些什么好玩的效果呢？下面這個滾動視差文字陰影/虛影效果很有意思：
CodePen Demo — CSS translate3d Parallax（https://codepen.io/Chokcoco/pen/XBgBBp）
當然，通過調整參數（perspective: ?px 以及 transform: translateZ(-?px);），還能有其他很有意思的效果出現：
CodePen Demo — CSS translate3d Parallax 2（https://codepen.io/Chokcoco/pen/PBXwdX）
是不是很有電影開片的廠商 LOGO 的特效的感覺 joy 。
師父領進門，修行在個人，怎么制作更好更有意思的效果還是需要花時間鉆研和琢磨，這里我僅僅是拋磚引玉，希望能見到更多 Nice 的效果。
動頁面是一個很常規的操作，結合這個交互行為可以在設計上有哪些可以發揮的點呢？可能這對很多人來說，算是一塊知識盲區，那么就跟著這篇文章一起來學習吧！
設計師應該要了解網頁上各種效果的實現能力，才能給用戶創造出非常吸引人的視覺體驗。
滾動頁面是一個很常規的操作，結合這個交互行為可以在設計上有哪些可以發揮的點呢？可能這對很多人來說，算是一塊知識盲區，那么就跟著這篇文章一起來學習吧！
視差滾動特效是用戶在滾動頁面的過程當中，頁面中不同元素隨之進行不同速率的運動，所營造出的接近3D的視覺效果。設計中增添音頻和視覺為內容賦予了更多的生機，傳達出許多純文字無法捕捉到的內容。滾動視差以步步推進的方式傳達出內容，以吸引人們閱讀，它利用了網頁的優勢呈現出非常棒的視覺效果。
滾動視差設計特別適合用來敘述一些細膩內容，隨著內容慢慢鋪開，通過設計能使得內容變得更加鮮活。滾動視差能夠突出故事內容，并把你吸引到它的敘述中。優秀的設計能夠使得每一頁的銜接自然流暢，使你在下滑頁面的過程中更加專注于內容。
我收集了一些非常好的滾動視差設計案例來幫助大家設計出屬于自己的網頁效果。
Snow Fall：The Avalanche at Tunnel Creek(http://www.nytimes.com/projects/2012/snow-fall/index.html#/?part=tunnel-creek) 是一部引人入勝的杰作。這是2012年華盛頓雪崩的悲慘故事，這個故事的每個部分都有自己獨立的頁面。
這是一份引人入勝的讀物，配有音頻和視頻媒體，可以讓大家更全面的了解那悲慘的一天到底發生了什么。我們不僅能讀到相關人員的故事，還能了解導致這次雪崩的地形和天氣條件。
這是一種多媒體講故事的方式，它揭示了本質原因，是什么促使了人們在尋求刺激的過程中不顧危險。
我們經常都喜歡拿千禧一代來開玩笑，但這一代確實面臨著一些重大的挑戰。 Millennials are screwed（https://highline.huffingtonpost.com/articles/en/poor-millennials/）這個網站通過一位年輕人的眼睛向我們展示了這個世界，以便清楚地了解他們所面臨的挑戰。
故事是由一位千禧一代的自述，用一種比較幽默的手段講述了他們所面臨的財務困境和其他現實問題。
這個網頁是通過懷舊的視頻動畫游戲，結合像素化的圖形和一些有趣的視覺效果來呈現的。它抓住了千禧一代人的復雜情感，同時也是為了讓年輕人更容易接受和閱讀。
讀了網頁上的內容，不禁讓我對千禧一代產生了更多的同情。這就是一個很好的例子，使用智能，有趣的網頁設計來連接更多的讀者。
對大多數人來說，世界標準時間（UTC）并不是一個特別吸引人的話題。但Zach Holman做了一個網站，解釋了它的工作原理以及使用時的復雜性。他的網站風趣幽默，把枯燥的理論講的通俗易懂。
在每一個分割內容之間會插入一些動態視頻背景，這些設計既特別，又不會令人生厭。這些驚艷的視覺沖突吸引了讀者的注意力，讓大家有興趣接下來會出現什么樣的炫目視覺效果。
任何讀過枯燥技術文章的人，都可能會昏昏入睡。這個案例在說明一件事，那就是富有創造力的展現形式可以將最枯燥的話題變得有趣。對于那些對程序設計不感興趣的人來說，這個網站應該算是一份非常有吸引力的讀物了。
慢慢滾動鼠標瀏覽網頁設計和藝術史（https://webflow.com/web-design-art-history）就像真的是在一座博物館里消磨時間（譯者注：我滑了好久）。每一個內容區間都像一個畫廊分支，展示了某一段時間內的流行趨勢。這個網站，記錄了藝術的演變。
由于網頁設計和視覺藝術有一些共通的語言，熟悉藝術史可以啟發自己創作出優秀的作品。如果你對藝術和設計感興趣，這個網站將會是一份很好的入門讀物。
滾動視差設計的使用打破了傳統故事展示的局限，充分使用網頁這種載體將創意發揮到極致。
Introduction to Interactions 2.0(https://webflow.com/ix2) ，這個網站帶著讀者圍觀了從web最初始的階段一直到現如今不會寫代碼也能創造出很棒的網站的突破。網站里包含了許多令人愉悅的網頁效果，回看這些歷史不禁感嘆，趨勢的更新迭代是有快啊。
滾動視差設計是講述線性故事的完美媒介——還有什么比時間流逝更線性呢？
從24小時直至宇宙的盡頭，在 Time in Perspective(https://wfs2.webflow.io/time-in-perspective)滾動觸發動畫時間軸，顯示每一個階段。這是一個很好的例子，使用網頁設計并不僅僅是為了營銷，設計同時也是創新教育的有力工具。
If the Moon were only 1 pixel(http://joshworth.com/dev/pixelspace/pixelspace_solarsystem.html) 網站使用的是一種橫軸動畫，帶你穿越浩瀚的宇宙。Josh Worth在向女兒解釋到達火星需要多長時間后創建這個網站，他想知道自己是否能用電腦來繪制太空地圖。這個網站很好的聚焦于空間的深度，幫助我們理解宇宙的深邃。Josh Worth用一個像素代表了月球，然后顯示了與其相關的一切物體。
這個項目是另一個很好的例子，說明好的設計可以讓學習變得更有吸引力。
我們每天接收到的信息太多了，從海量的信息中，我們很難保證知道最新的狀態。華盛頓郵報的追蹤伊斯蘭國（http://www.washingtonpost.com/wp-srv/special/world/islamic-state-tracker/?noredirect=on）展示了伊斯蘭國的歷史和當前發展。
右側的界面，滾動可以瀏覽時間軸，而在界面的左側則在地圖上突出顯示故事發生的位置。點擊地圖上的點，你就會看到那個位置的具體情況。將位置映射到每個事件可以更深入地了解每個區域。
馬克吐溫有句名言：“解釋幽默就很像解剖一只青蛙，你在這個過程中是能學到很多，但最終你卻把它殺死了。”但遺憾的是，對于他來說，沒能等到數字時代的到來。
之前給出的很多案例都在討論把滾動效果應用于時間軸相關的內容，喜劇表演是一種敘事性的表演，節奏和組合的重要性與真正的笑話一樣。
Ali Wong Structure of Stand-Up Comedy是對Ali Wong最新脫口秀《Baby Cobra》的分析，它分析節目中的每一個瞬間，每一個笑話，以顯示最大的笑點到底在哪里。這是一個關于時間和節奏如何能夠帶來更好效果的有趣研究，同時也讓我們了解到Ali Wong為什么能成為如此出色的作家和演員。
我們已經了解了如何使用不同滾動效果來講述不同類型的故事，以及其中包含的一些設計方法。為了幫助大家能做出自己的滾動視差效果，我收集了一些工具來幫助你。如果想在設計工作時進行嘗試，Webflow可能是最好的選擇。
滾動時以不同的速度移動元素是創建視差的一種方式。視差是一個簡單的效果，在故事中創造多維度的動畫，促使人們繼續閱讀。
在“網頁設計和藝術史”的網頁中使用了視差效果來展現這些幾何圖形。
打開這個教程來開始制作這個效果。
在設計中使用滾動觸發的進度條，是一種向人們展示所處位置并不斷推動他們前進的方式。這個藍色進度條固定在頁面的頂部，平滑的動畫從0擴展到100%。它提升了閱讀體驗，也成為了更好的導航。
當一個設計有太多的靜態內容時，閱讀起來會很累。在滾動模式下，長篇故事講述的過程中，動畫提供了一個很好的休息時間，隨著內容的淡入淡出，在閱讀體驗上做到了最好。
這種效果可以應用于文本或者視覺效果，我們在Graphic design archive中使用這種效果，標志著一個新的內容塊的開始。
我們在這里提供了一份教程幫助大家理解這種效果的實現方法。
當頁面上有一個閑置的設計元素時，比如標題，為什么不給它一些活力呢？水平動畫喚醒了這些沉睡的設計元素，給予它們新的生命。以上面給出的例子來說明，水平移動標志著故事的開始，“Let’s go outside”更具有吸引力。
這里我們也提供了一份教程。
水平滾動是一個不錯的改變，它會讓你的注意力集中到內容上，并打破傳統的垂直布局。
Proud and Torn是一個關于匈牙利歷史的網站，使用水平滾動來突出它所涵蓋的不同時代。
回顧我們之前討論過的藝術網頁設計和藝術史——我們使用水平滾動作為另一種讓人們保持活躍和參與的方式。
我們這邊有給出一個關于水平滾動的教程將讓能設計出屬于自己的網站。
Pudding是Ali Wong的喜劇作品原創網站，上面有關于如何設計“粘性定位”的教程。粘性定位是將一個元素暫時放在一個設計中，引起人們的注意，繼續滾動一會兒，它就會固定在頁面的某一個位置。我們都是上面那份教程的粉絲，它以一種容易理解的方式分解了這個過程，這些都是通過滾動來實現的效果。
（譯者注：sticky 是css position中的一種新增屬性，相當于relative和fixed的結合體。這個屬性的表現就是現實中你見到的吸附效果。）
我們剛才討論了粘性定位，那做出一個粘性側邊欄效果又會如何呢？
滾動一段時間后，側邊欄就會固定在某一個位置，用這種效果來做導航實在是非常好用。
這里也提供一個小教程給大家作為參考，以方便在自己的項目中使用這種效果：https://university.webflow.com/article/position-sticky
網頁已經改變了講故事的方式。有了動畫，特效和互動，閱讀不再是被動的體驗。滾動視差是一種多媒體的體驗，可以激發更深層次的思考和理解。它展示了很多不能單獨用語言來表達的東西，使得讀者也成為一個積極的參與者。
原文：https://webflow.com/blog/scrollytelling-guide
作者：Jeff Cardello
譯者：彩云Sky，公眾號：彩云譯設計
本文由 @彩云Sky 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
