iT邦幫忙

2023 iThome 鐵人賽

DAY 11
0
Modern Web

不用庫 也能酷 - 玩轉 CSS & Js 特效系列 第 11

Day11 說滾不是真的要你滾 - 背景滾動視差

  • 分享至 

  • xImage
  •  

你有看過這種頁面往下滾,但圖片位置沒有往下的效果嗎?

background-attachment:fixed

這是舊版的毛哥EM資訊密技黑歷史。偷偷告訴你,這個效果只需要一行 CSS就可以做到。background-attachment 屬性可以用來控制背景圖片的滾動方式。在這篇文章中,我們將詳細介紹這個屬性以及如何使用它來實現不同的效果。

什麼是 background-attachment

background-attachment 是 CSS 中用於控制背景圖片滾動行為的屬性。它有三個值:

  1. scroll(滾動):這是默認值,背景圖片將隨著頁面的滾動而移動。
  2. fixed(固定):背景圖片將保持固定在視口的某個位置,不隨頁面的滾動而移動。這可以創建一種視差滾動效果,使背景圖片保持在原地,而內容文字或元素則滾動過它。
  3. local(本地):它會使背景圖片隨著元素的內容滾動而移動,而不是整個頁面。有點像屬於那個框框的背景。這個值在大部分情況下比較少見。

飯粒範例

現在讓我們來看看幾個飯粒的範例

創建固定背景圖片

假設你想要在網站的首頁上創建一個固定的背景圖片,以實現視差效果。你可以這樣設置 CSS:

body {
    background-image: url('your-image.jpg');
    background-attachment: fixed;
    background-size: cover; /* 可選,用於調整圖片大小以填充整個視口 */
}

background-attachment:fixed

這將使背景圖片保持固定,而內容將在其上滾動,創建出一種動態的效果。

使用 scroll

如果你想要一個網站上的背景圖片會隨著頁面滾動而移動…那麼你什麼都不用做,本來不就是這樣。但如果你有別的屬性蓋過去的話可以用 scroll 改回來。

body {
    background-image: url('your-image.jpg');
    background-attachment: scroll;
}

使用 local

最後,如果你想要在某個元素內部創建一個背景圖片,並且希望它隨著該元素的滾動而移動,你可以使用 local 值。這個值通常應用於具有自己的滾動區域的元素,例如 divsection

.container {
    background-image: url('your-image.jpg');
    background-attachment: local;
}

這將使背景圖片與 .container 元素的內容滾動同步,而不是整個頁面。

來個大範例
https://codepen.io/edit-mr/pen/rNodVbV

飯粒範例

總之,background-attachment 屬性是一個強大的工具,可以用來控制背景圖片的滾動方式,從而實現不同的視覺效果。雖然實際功能不大但可以給人一種出乎意料且不會那麼死板的感覺。

不過這只是最基本的滾動視差,且只能應用在圖片上面。明天我們將要討論如何讓任何你想要的東西滾起來。

希望這篇文章能幫助你更好地理解和應用這個屬性,歡迎在 InstagramGoogle 新聞追蹤毛哥EM資訊密技,也歡迎訂閱我新開的YouTube頻道:網棧

我是毛哥EM,讓我們明天再見。


上一篇
Day10 永無止境跑馬燈 - 不同螢幕 相同速度
下一篇
Day12 Js 滾動視差 甚麼都能滾(ft. 國中數學)
系列文
不用庫 也能酷 - 玩轉 CSS & Js 特效30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言