之前看到國(guó)外的一些網站的文章内容頁，有些喜歡使用一張大圖來作爲标題背景，當用戶向(xiàng)下滾動頁面(miàn)時背景圖标固定或以漸隐的形式消失，并帶有些視差效果

，真的很有趣。

這(zhè)可以算是一個微創新，大家可以嘗試這(zhè)種(zhǒng)交互增加你的文章展示效果，但怎麼(me)實現呢？剛好(hǎo)最近codrops國(guó)外博客發(fā)布了一個相關的效果源碼，裡(lǐ)面(miàn)效果更棒

！

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司、、、先誠官網：/ 

作者制作了7個相關的文章展示效果案例，每個都(dōu)有不同的特别，下面(miàn)一起(qǐ)來看看有什麼(me)不同吧：
效果1：PUSH

PUSH的效果是當用戶向(xiàng)下滾動頁面(miàn)時，圖片會向(xiàng)上漸隐，而文章内容會跟著(zhe)從下至上的漸顯出來。

效果2：FADE OUT

FADE OUT背景圖像也是向(xiàng)上漸移，不同的是，圖像不會消失，但注意的是，圖像下方有個漸變的過(guò)渡，讓用戶看起(qǐ)來很舒适。

效果3：SLICED

SLICED獨特之處就是圖像像被(bèi)切割一樣(yàng)從圖像的中心開(kāi)始切開(kāi)動畫。

效果4：SIDE

Side就是向(xiàng)下滾動頁面(miàn)時，圖像會以側邊形式展示。

效果5：FIXED SIDE

有點類似Side，但圖像是布滿上下屏幕，效果很不錯。

效果6：GRID

Grid效果如下圖，當用戶向(xiàng)下滑動頁面(miàn)時，圖像變回Grid列表形式，這(zhè)可以讓用戶看到自己在讀那篇文章。

效果7：Jam3

最後(hòu)一個效果是作者模仿 Jam3 網站制作出來的，用戶向(xiàng)下滑動網頁，圖像會自動切成(chéng)一個小banner。

總結

這(zhè)些文章效果看起(qǐ)來确實很贊，但因爲帶有動畫效果，這(zhè)樣(yàng)卻給用戶延遲了一閱讀時間，對(duì)一些用戶來說可能(néng)是不好(hǎo)的體驗，所以大家還(hái)是考慮清楚再使用，選

擇最适合的方式