創新的視覺體驗,特別的開頭效果介紹分享

ArticleIntroEffects_07

之前看到國外的一些網站的文章內容頁,有些喜歡使用一張大圖來作為標題背景,當用戶向下滾動頁面時背景圖標固定或以漸隱的形式消失,並帶有些視差效果。最近codrops國外博客發布了一個相關的效果源碼,裡面效果更棒!

作者製作了7個相關的文章展示效果案例,每個都有不同的特別,下面一起來看看有什麼不同吧!

 

效果1:PUSH

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

ArticleIntroEffects_01

查看網址:http://tympanus.net/Development/ArticleIntroEffects/index.html

 

效果2:FADE OUT

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

ArticleIntroEffects_02

查看網址:http://tympanus.net/Development/ArticleIntroEffects/index2.html

 

效果3:SLICED

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

ArticleIntroEffects_03

查看網址:http://tympanus.net/Development/ArticleIntroEffects/index3.html

 

效果4:SIDE

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

ArticleIntroEffects_05

查看網址:http://tympanus.net/Development/ArticleIntroEffects/index4.html

 

效果5:FIXED SIDE

有點類似Side,但圖像是佈滿上下營幕,效果很不錯。

ArticleIntroEffects_06

查看網址:http://tympanus.net/Development/ArticleIntroEffects/index5.html

 

效果6:GRID

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

ArticleIntroEffects_07

查看網址:http://tympanus.net/Development/ArticleIntroEffects/index6.html

 

效果7:Jam3

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

ArticleIntroEffects_08

查看網址:http://www.jam3.com/

 

這些效果是不是很不一樣很特別呢?若可以從中獲得一些靈感和啟發去創造出更酷的東西一定是對你有幫助的喔!

原文:http://tympanus.net/codrops/2014/05/22/inspiration-for-article-intro-effects/

 

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s