之前看到國外的一些網站的文章內容頁，有些喜歡使用一張大圖來作為標題背景，當用戶向下滾動頁面時背景圖標固定或以漸隱的形式消失，并帶有些視差效果，真的很有趣。
這可以算是一個微創(chuàng)新，大家可以嘗試這種交互增加你的文章展示效果，但怎么實現(xiàn)呢？剛好最近codrops國外博客發(fā)布了一個相關的效果源碼，里面效果更棒！

查看在線演示：DEMO
源碼下載：微盤

PS: 制作這類文章介紹當然不能少漂亮的圖片啦，想要高清大圖，一個導航滿足你！戳：設計師網址導航

作者制作了7個相關的文章展示效果案例，每個都有不同的特別，下面一起來看看有什么不同吧：

效果1：PUSH

PUSH的效果是當用戶向下滾動頁面時，圖片會向上漸隱，而文章內容會跟著從下至上的漸顯出來。

查看DEMO

效果2：FADE OUT

FADE OUT背景圖像也是向上漸移，不同的是，圖像不會消失，但注意的是，圖像下方有個漸變的過渡，讓用戶看起來很舒適。

查看DEMO

效果3：SLICED

SLICED獨特之處就是圖像像被切割一樣從圖像的中心開始切開動畫。

查看DEMO

效果4：SIDE

Side就是向下滾動頁面時，圖像會以側邊形式展示。

查看DEMO

效果5：FIXED SIDE

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

查看DEMO

效果6：GRID

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

查看DEMO

效果7：Jam3

最后一個效果是作者模仿?Jam3?網站制作出來的，用戶向下滑動網頁，圖像會自動切成一個小banner。

總結

這些文章效果看起來確實很贊，但因為帶有動畫效果，這樣卻給用戶延遲了一閱讀時間，對一些用戶來說可能是不好的體驗，所以大家還是考慮清楚再使用，選擇最適合的方式。

原文地址：shejidaren

【優(yōu)設網 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網================
"優(yōu)設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量69萬的人氣微博@優(yōu)秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：