之前看(kàn)到(dào)國(guó)外(wài)的(d©☆¶e)一(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ǐ)面效果更棒

！

內(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ì)公司、、、先誠官網：/ 

作(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óng)下(xià)至上(shàng÷ ‌♦)的(de)漸顯出來(lái)。

效果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)舒∞₩适。

效果3：SLICED

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

效果4：SIDE

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

效果5：FIXED SIDE

有(yǒu)點類似Side，但(dàn)圖像是(shì)布滿上(>®≈★shàng)下(xià)屏幕，效果很(hěn)不(bù)錯'₩(cuò)。

效果6：GRID

Grid效果如(rú)下(xià)圖，當用(yòng)戶向下(xià)滑動頁面時(shí)，<>​'圖像變回Grid列表形式，這(zhè)可(kě)以讓用(yòng)戶看(kàn)到¶β(dào)自(zì)己在讀(dú)那(nà)篇文(wén)章(§♦zhāng)。

效果7：Jam3

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

總結

這(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)，對(duì♥∞≠)一(yī)些(xiē)用(yòng)戶來(lái)說(shuō)可(kφφě)能(néng)是(shì)不(bù)←÷"好(hǎo)的(de)體(tǐ)驗，所以大(dà)家(jiā)還(hái)♣★ β是(shì)考慮清楚再使用(yòng)，選

擇最适合的(de)方式