之前看(kàn)到(dào)國(guó)外(wài)的(de)一(yī)些×ε(xiē)網站(zhàn)的(de)文(wén)章(zhāng)內(nèi)容頁£®‌，有(yǒu)些(xiē)喜歡使用(yònσ  →g)一(yī)張大(dà)圖來(lái)作(zuò)為(wèi)标題背景，當用(yòng)戶向®₽∞下(xià)滾動頁面時(shí)背景圖标固定或以漸隐的(de↓♠✔↑)形式消失，并帶有(yǒu)些(xiē)視(shì)差效果，真的(de)很(hěn)有(yǒu)趣₩≠。

這(zhè)可(kě)以算(suàn)是(¶¶$™shì)一(yī)個(gè)微(wēi)創新，大(dà)家(jiā)可(kě)以嘗試這(zh®×¥☆è)種交互增加你(nǐ)的(de)文(wén)章(zhāng)☆™'展示效果，但(dàn)怎麽實現(xiàn)呢(ne)？剛好(h>∏♣ǎo)最近(jìn)codrops國(guó)外β∞≤(wài)博客發布了(le)一(yī)個(gè)相(xiàng)關的(de)效果源碼，裡(lǐ£©)面效果更棒！

作(zuò)者制(zhì)作(zuò)了(le)7個(gè)相(xiàng)關的(de)Ω©文(wén)章(zhāng)展示效果案例，每$λ個(gè)都(dōu)有(yǒu)不(bù)同的(de)特别，下(xià)面一(y‌©ī)起來(lái)看(kàn)看(kàn‍∑♠≈)有(yǒu)什(shén)麽不(bù)同吧(ba)：
效果1：PUSH

PUSH的(de)效果是(shì)當用(y₩©∏òng)戶向下(xià)滾動頁面時(shí)，圖片會(huì)向上(shδ→♥àng)漸隐，而文(wén)章(zhāng)內(nèi)容會(huì)跟著(zhe)從(cón¥↑®$g)下(xià)至上(shàng)的(de)漸顯出來(lái)。

詳細解析7個(gè)漂亮(liàng)的(de)文(wén)章(zhāng)頭部介紹效果♦',PS教程,思緣教程網

效果2：FADE OUT

FADE OUT背景圖像也(yě)是(shì)向上(shàng)"∏ε漸移，不(bù)同的(de)是(shì)，圖像不(bù)♣≥× 會(huì)消失，但(dàn)注意的(de)是(shì)，圖像下(xià)方有↔ε≤(yǒu)個(gè)漸變的(de)過渡，讓用(yòng)戶看(kàn)∑•γ起來(lái)很(hěn)舒适。

詳細解析7個(gè)漂亮(liàng)的(de)文(wén)章(zhān₹Ω♣>g)頭部介紹效果,PS教程,思緣教程網

內(nèi)蒙古網站(zhàn)制(zhì)作(zuò)，內(nèπ≈©♥i)蒙古網站(zhàn)設計(jì)，內(nèi)蒙古網站(zhà♥↓÷n)建設，呼和(hé)浩特網站(zhàn)建設，呼和(hé)浩特網站(zhàn₹‍)制(zhì)作(zuò)、呼和(hé)浩特網β↑δ$站(zhàn)設計(jì)首選內(nèi)蒙古呼和(hé)浩特先誠網絡≤₹←科(kē)技(jì)公司、、、先誠官網：/ 

效果3：SLICED

SLICED獨特之處就(jiù)是(shì)圖像像被切割一(yī)樣從(cóng)圖像的(de★φ)中心開(kāi)始切開(kāi)動畫(hu₽¶‍à)。

詳細解析7個(gè)漂亮(liàng)的(de)文(wén∞♦©≤)章(zhāng)頭部介紹效果,PS教程,思緣教程網

效果4：SIDE

Side就(jiù)是(shì)向下(xià)滾動頁面時₹™€(shí)，圖像會(huì)以側邊形式展示。

詳細解析7個(gè)漂亮(liàng)的(de)文(wén)章(zhāng)頭部介紹效∑‌®≈果,PS教程,思緣教程網

效果5：FIXED SIDE

有(yǒu)點類似Side，但(dàn)圖像是(shγ§δ•ì)布滿上(shàng)下(xià)屏幕，效果很(hěnβσ×☆)不(bù)錯(cuò)。

詳細解析7個(gè)漂亮(liàng)的(de)文(wén)¥₽Ω✘章(zhāng)頭部介紹效果,PS教程,思緣教程網

效果6：GRID

當用(yòng)戶向下(xià)滑動頁面時(shí)，圖像變回Grid列表形式，這π♦→>(zhè)可(kě)以讓用(yòng)戶看(kà™>λ☆n)到(dào)自(zì)己在讀(dú)那(nà)篇文(wén)章(zhāng)。

詳細解析7個(gè)漂亮(liàng)的(de)文(wén)章(zhāng)頭部介紹效​♠δ≥果,PS教程,思緣教程網

效果7：Jam3

最後一(yī)個(gè)效果是(shì)作(zuò)者模仿 Jam3 網站(zhàn)制(z↔₽φhì)作(zuò)出來(lái)的(de)，用(yòng)戶向下( ✘ ←xià)滑動網頁，圖像會(huì)自(zì)動切成一(yī)個(gè≈♣☆)小(xiǎo)banner。

詳細解析7個(gè)漂亮(liàng)的(de)™ε文(wén)章(zhāng)頭部介紹效果,PS教程,思緣教程網
總結

這(zhè)些(xiē)文(wén)章(zhāng)效果看(kàn)起來(lái≠∑)确實很(hěn)贊，但(dàn)因為(wèi)帶有÷®(yǒu)動畫(huà)效果，這(zhè)樣卻給用(yòng​σ​§)戶延遲了(le)一(yī)閱讀(dú)時(shí)間(jiān)，對(d∏ δ uì)一(yī)些(xiē)用(yòng)戶來(lái)說(shuō)可(kě)能(n×₽éng)是(shì)不(bù)好(hǎo)的(de)體€λ→₽(tǐ)驗，所以大(dà)家(jiā)還(hái)是(shì)考慮‌ε&₩清楚再使用(yòng)，選擇最适合的(de)方式