之前看到國(guó)外的一些網(wǎng)站的文章內(nèi)容頁，有些喜歡使用一張大圖來作為標(biāo)題背景，當(dāng)用戶向下滾動(dòng)頁面時(shí)背景圖標(biāo)固定或以漸隱的形式消失，并帶有些視差效果，真的很有趣。

這可以算是一個(gè)微創(chuàng)新，大家可以嘗試這種交互增加你的文章展示效果，但怎么實(shí)現(xiàn)呢？剛好最近c(diǎn)odrops國(guó)外博客發(fā)布了一個(gè)相關(guān)的效果源碼，里面效果更棒！

作者制作了7個(gè)相關(guān)的文章展示效果案例，每個(gè)都有不同的特別，下面一起來看看有什么不同吧：
效果1：PUSH

PUSH的效果是當(dāng)用戶向下滾動(dòng)頁面時(shí)，圖片會(huì)向上漸隱，而文章內(nèi)容會(huì)跟著從下至上的漸顯出來。

詳細(xì)解析7個(gè)漂亮的文章頭部介紹效果,PS教程,思緣教程網(wǎng)

效果2：FADE OUT

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

詳細(xì)解析7個(gè)漂亮的文章頭部介紹效果,PS教程,思緣教程網(wǎng)

內(nèi)蒙古網(wǎng)站制作，內(nèi)蒙古網(wǎng)站設(shè)計(jì)，內(nèi)蒙古網(wǎng)站建設(shè)，呼和浩特網(wǎng)站建設(shè)，呼和浩特網(wǎng)站制作、呼和浩特網(wǎng)站設(shè)計(jì)首選內(nèi)蒙古呼和浩特先誠(chéng)網(wǎng)絡(luò)科技公司、、、先誠(chéng)官網(wǎng)：http://www.schuylerstatebank.com/ 

效果3：SLICED

SLICED獨(dú)特之處就是圖像像被切割一樣從圖像的中心開始切開動(dòng)畫。

詳細(xì)解析7個(gè)漂亮的文章頭部介紹效果,PS教程,思緣教程網(wǎng)

效果4：SIDE

Side就是向下滾動(dòng)頁面時(shí)，圖像會(huì)以側(cè)邊形式展示。

詳細(xì)解析7個(gè)漂亮的文章頭部介紹效果,PS教程,思緣教程網(wǎng)

效果5：FIXED SIDE

有點(diǎn)類似Side，但圖像是布滿上下屏幕，效果很不錯(cuò)。

詳細(xì)解析7個(gè)漂亮的文章頭部介紹效果,PS教程,思緣教程網(wǎng)

效果6：GRID

當(dāng)用戶向下滑動(dòng)頁面時(shí)，圖像變回Grid列表形式，這可以讓用戶看到自己在讀那篇文章。

詳細(xì)解析7個(gè)漂亮的文章頭部介紹效果,PS教程,思緣教程網(wǎng)

效果7：Jam3

最后一個(gè)效果是作者模仿 Jam3 網(wǎng)站制作出來的，用戶向下滑動(dòng)網(wǎng)頁，圖像會(huì)自動(dòng)切成一個(gè)小banner。

詳細(xì)解析7個(gè)漂亮的文章頭部介紹效果,PS教程,思緣教程網(wǎng)
總結(jié)

這些文章效果看起來確實(shí)很贊，但因?yàn)閹в袆?dòng)畫效果，這樣卻給用戶延遲了一閱讀時(shí)間，對(duì)一些用戶來說可能是不好的體驗(yàn)，所以大家還是考慮清楚再使用，選擇最適合的方式