แบบทางเลือก: การสร้าง Parallax scrolling

เรียนรู้วิธีการใช้ CSS ที่จะสร้างท่าที Parallax scrolling

Parallax scrolling

ทั้งนี้ Parallax scrolling คือแนวทางการออกแบบเว็บไซต์ที่ที่ส่วนหลังของเนื้อหา (เช่น รูปภาพ) จะเคลื่อนไหวที่ความเร็วต่างกันเมื่อเคลื่อนไหวโดยประมาณ คลิกลิงก์ด้านล่างเพื่อดูความแตกต่างระหว่างเว็บไซต์ที่มี Parallax scrolling และที่ไม่มี

有視差滾動效果的演示

無視差滾動效果的演示

注意：視差滾動不總是在移動設備/手機上有效。但是，您可以使用媒體查詢在移動設備上關閉此效果（請參考本頁最後一個例子）。

如何創建視差滾動效果

使用一個容器元素，并向該容器添加一幅具有特定高度的背景圖像。然後，使用 background-attachment: fixed; 創建實際的視差效果。其他背景屬性用於居中和完美縮放圖像：

以像素為單位的實例

<style>
.parallax {
  /* 所用的圖像 */
  background-image: url("img_parallax.jpg");
  /* 設置特定高度 */
  min-height: 500px;
  /* 創建視差滾動效果 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Container element */
<div class="parallax"></div>

親自試一試

上面的例子使用像素來設置圖像的高度。如果您想使用百分比，例如 100%，以使圖像適合整個螢幕，請將視差容器的高度設置為 100%。注意：您還必須將 height: 100%; 應用於 <html> 和 <body>：

以百分比为單位的實例

body, html {
  height: 100%;
}
.parallax {
  /* 所用的圖像 */
  background-image: url("img_parallax.jpg");
  /* 全高 */
  height: 100%;
  /* 創建視差滾動效果 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

親自試一試

一些移動設備在使用 background-attachment: fixed; 時會出現問題。但是，您可以使用媒體查詢在移動設備上關閉視差效果：

實例

/* 關閉所有平板電腦和手機的視差滾動。如果需要，可以增加/減少像素 */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

親自試一試

在上述代碼中，當螢幕寬度小於或等於 1366 像素時，將關閉視差滾動效果，這對於大多數平板電腦和手機都是適用的。這是通過改變 .parallax 的 background-attachment 属性從 fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。