7個創(chuàng)意驚人的文本展示特效頁面

2018-01-22 2261 0
之前看到國外的一些網(wǎng)站的文章內(nèi)容頁,有些喜歡使用一張大圖來作為標題背景,當用戶向下滾動頁面時背景圖標固定或以漸隱的形式消失,并帶有些視差效果,真的很有趣。
這可以算是一個微創(chuàng)新,大家可以嘗試這種交互增加你的文章展示效果,但怎么實現(xiàn)呢?剛好最近codrops國外博客發(fā)布了一個相關(guān)的效果源碼,里面效果更棒! 查看在線演示:DEMO        
源碼下載:微盤 作者制作了7個相關(guān)的文章展示效果案例,每個都有不同的特別,下面一起來看看有什么不同吧:
效果1:PUSH PUSH的效果是當用戶向下滾動頁面時,圖片會向上漸隱,而文章內(nèi)容會跟著從下至上的漸顯出來。 全新的閱讀體驗!7個創(chuàng)意驚人的文本展示效果
查看DEMO 效果2:FADE OUT FADE OUT背景圖像也是向上漸移,不同的是,圖像不會消失,但注意的是,圖像下方有個漸變的過渡,讓用戶看起來很舒適。 全新的閱讀體驗!7個創(chuàng)意驚人的文本展示效果
查看DEMO 效果3:SLICED SLICED獨特之處就是圖像像被切割一樣從圖像的中心開始切開動畫。 全新的閱讀體驗!7個創(chuàng)意驚人的文本展示效果
查看DEMO 效果4:SIDE Side就是向下滾動頁面時,圖像會以側(cè)邊形式展示。
全新的閱讀體驗!7個創(chuàng)意驚人的文本展示效果
查看DEMO 效果5:FIXED SIDE 有點類似Side,但圖像是布滿上下屏幕,效果很不錯。
全新的閱讀體驗!7個創(chuàng)意驚人的文本展示效果
查看DEMO 效果6:GRID Grid效果如下圖,當用戶向下滑動頁面時,圖像變回Grid列表形式,這可以讓用戶看到自己在讀那篇文章。 全新的閱讀體驗!7個創(chuàng)意驚人的文本展示效果
查看DEMO 效果7:Jam3 最后一個效果是作者模仿 Jam3 網(wǎng)站制作出來的,用戶向下滑動網(wǎng)頁,圖像會自動切成一個小banner。 全新的閱讀體驗!7個創(chuàng)意驚人的文本展示效果 總結(jié) 這些文章效果看起來確實很贊,但因為帶有動畫效果,這樣卻給用戶延遲了一閱讀時間,對一些用戶來說可能是不好的體驗,所以大家還是考慮清楚再使用,選擇最適合的方式。 
24
評論區(qū)(0)
正在加載評論...
相關(guān)推薦