通過滾動網(wǎng)頁而展示出動畫效果的設(shè)計是怎么來的？

時間：2024-02-15 08:00:01 | 來源：網(wǎng)站運營

時間：2024-02-15 08:00:01 來源：網(wǎng)站運營

通過滾動網(wǎng)頁而展示出動畫效果的設(shè)計是怎么來的？：視差滾動——視覺滾動落差技術(shù)。通常建議設(shè)計師構(gòu)思好前臺實現(xiàn)效果，并且具有一定的前臺能力去實現(xiàn)自己的想法。

摘取一個故事的前兩段來說一下視差滾動這個東西吧~

-----------------------------------我是分割線------------------------------------

故事說起在一個冰冷幽暗的夜晚上，我正思考的十分重要的人生問題，這周末該去那里happy好呢？是宅在家里好呢，或者宅在家里好呢，還是宅在家里好呢？這時，萬年隱身的QQ竟然浮起淺色聊天框，我去！不得了，居然是女神主動聯(lián)系我，女神一定是因為我俊朗的五官，185的模特身材而深深地迷戀上我了，呵呵呵呵呵呵。

“誒，X，你在干嘛呢？”
“沒啊，在思考人生?！? 難道這是要約我的節(jié)奏嗎？在妹子前必須保持冷靜。
“那個這周我要搞一個游戲宣傳的頁面，設(shè)計師說用【視差滾動】的效果，你能做個demo頁給我看看？”

。。。。。。。。。沒事！雖然跟我預(yù)想有點出入，但女神這是在考驗我！

【定義】

所謂的視差滾動，就是在頁面滾動過程中，多層次的元素進(jìn)行不同程度的位移，帶來立體的視差效果。還有很多的奇思妙想的展現(xiàn)方式，都是滾動頁面觸發(fā)的，也可稱為視差滾動。視差滾動里面最基礎(chǔ)的就是切換背景，這點其實一個CSS就滿足了

【視差滾動原理一】
background-attachment: fixed || scroll || local
默認(rèn)是scroll，內(nèi)容跟著背景走，而視差滾動頁面里用fixed，背景相對頁面固定而不跟內(nèi)容滾動。

很快地我就做出了一個demo出來，還特意配上幾張優(yōu)雅的圖片和極富內(nèi)涵的詞句，女神一定會因為我的文采而愛上我的，而且，那些看似簡單的“我是內(nèi)容”不斷重復(fù)，其實只要細(xì)心就會發(fā)現(xiàn)里面隱藏著我的表白，情商如此之高的女神，一定會發(fā)現(xiàn)，然后我們就可以幸福的在一起，在愛情的滋潤下，我很快就能升職加薪，當(dāng)上總經(jīng)理，出任CEO，贏取白富美，走上人生巔峰。哈哈哈哈哈哈哈哈，誒？好像不用贏取白富美，那就挑戰(zhàn)白富美。

demo1：視差滾動原理一

“咦，怎么是靜態(tài)的，譚偉X，能不能幫我做個會動的那種的視差滾動，麻煩了么么噠~”

。。。。。。居然完全沒有留意到我溢出的文采和隱藏的表白。。。。。沒事！雖然跟我預(yù)想有點出入，但女神這是在考驗我！

【視差滾動原理二】
女神想要些更加豐富的效果，也對，像我這么內(nèi)涵有檔次的程序員，當(dāng)然要來寫非常酷的動畫效果。
在原理的demo1的基礎(chǔ)上，我在scroll事件上添加一些動畫事件。

視差滾動的表現(xiàn)方式非常多，滾動到頁面某個值后會觸發(fā)一個CSS3動畫，這也是眾多視差滾動中常見的一種。

demo2：

視差滾動原理(這個Demo使用了CSS3動畫，請使用現(xiàn)代瀏覽器查看)



接下來的情節(jié)請戳下面的鏈接：

視差滾動的愛情故事

目前國內(nèi)運用的比較好的網(wǎng)站介紹一下：

網(wǎng)易手機(jī)將軍令QQ瀏覽器官網(wǎng)_輕快上網(wǎng) 瞬間開啟

以上