如何創建簡單的視差滾動效果

已發表: 2017-09-08

在本教程中，我們以最簡單的方式來看看美麗的視差滾動效果，包括固定的背景和滾動的內容。

下載源文件查看演示

簡介

視差是一種效果，當從不同位置觀看時，對象的位置似乎不同。視差運動，或者在我們的例子中是視差滾動，給我們一種錯覺，即同一視線中的兩個物體，但它們之間有距離，似乎以不同的速度移動。如果你曾經在高速公路上以每小時 100 公里的速度行駛時向車窗外看，你會注意到電線桿似乎在高速移動，而背景中的山脈似乎在緩慢移動，幾乎停滯不前。這是行動中的視差運動。

就網絡而言，我們可以在上面有背景圖像和文本的容器上產生視差效應。在最簡單的形式中，視差滾動將導致內容正常滾動，而背景保持靜止。這種最簡單形式的技術的美妙之處在於它只需要 CSS。讓我們深入挖掘。

標記和結構

如果您有一個無響應的固定站點，那麼實現這一點就沒有任何技巧。不過，我們正處於響應式網頁設計的時代，所以這是不行的。不要害怕！我們有一些不錯的 CSS 可供使用。但首先，看看一些標記。標記很簡單——我們將交替使用背景/標題文本sections和內容sections以獲得最大效果。這是它的樣子：


  
    安詳
  



  
    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...



  



  
    上升
  



  
    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  
    冷靜的
  



  
    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

每個具有parallax類的section將包含我們的背景圖像和標題文本，而具有一類content的每個section將是簡單的包含內容的部分。 container類是一個具有最大寬度的流體 div，使得它的響應性非常簡單。現在，讓我們深入研究 CSS。

樣式化和使用 CSS

首先要注意的是，我所有的背景圖片的width都是 1600 像素， height是 600 像素。這允許我將視差部分設置為 600 像素的固定高度。不過，還有更多的東西。因為我不想重複背景（我使用的是大而粗的圖像），所以我不能總是期望用戶處於最大寬度（這將允許背景圖像在全視圖中）。幸運的是，我們可以利用 CSS background-size屬性，並將其設置為cover 。這迫使背景圖像通過按比例擴展來佔據總可用空間。不過，它需要前綴以獲得最大支持，因此請注意這一點。

到目前為止一切順利，除了最重要的事情。當我們的內容滾動經過它時，我們需要我們的背景圖像保持固定。同樣，CSS 讓我們的生活變得輕鬆。我們利用background-attachment屬性並將其設置為fixed 。簡單的！這是我的 CSS 的樣子，帶有一些示例媒體查詢：

 /* ================================================= =============
  主要結構
==================================================== ========== */
。容器 {
  最大寬度：960px；
  邊距：0 自動；
}
/* ================================================= =============
  部分
==================================================== ========== */
section.module:last-child {
  邊距底部：0；
}
section.module h2 {
  邊距底部：40px；
  font-family: "Roboto Slab", serif;
  字體大小：30px；
}
部分.模塊 p {
  邊距底部：40px；
  字體大小：16px；
  字體粗細：300；
}
section.module p:last-child {
  邊距底部：0；
}
section.module.content {
  填充：40px 0；
}
section.module.parallax {
  高度：600px；
  背景位置：50% 50%；
  背景重複：不重複；
  背景附件：固定；
  背景尺寸：封面；
}
section.module.parallax h1 {
  顏色：rgba(255, 255, 255, 0.8);
  字體大小：48px；
  行高：600px；
  字體粗細：700；
  文本對齊：居中；
  文本轉換：大寫；
  文本陰影：0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  背景圖片：url（“../img/demo/_small/1.jpg”）；
}
section.module.parallax-2 {
  背景圖片：url（“../img/demo/_small/2.jpg”）；
}
section.module.parallax-3 {
  背景圖片：url（“../img/demo/_small/3.jpg”）；
}

@media all and (min-width: 600px) {
  section.module h2 {
    字體大小：42px；
  }
  部分.模塊 p {
    字體大小：20px；
  }
  section.module.parallax h1 {
    字體大小：96px；
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    字體大小：160px；
  }
}

瀏覽器支持和屬性信息

一般來說，瀏覽器支持真的很棒。 IE8 及以下不支持background-size屬性，但一個簡單的條件樣式應該可以解決這個問題。除此之外，一切都得到支持，你不應該有任何問題。有關本教程中使用的 CSS 屬性的更多信息，請查看 MDN：

背景位置- MDN 參考
背景大小– MDN 參考
背景附件– MDN 參考

包起來

在這裡，我們實現了一些簡單、有效且與普通的“一次全部滾動”的外觀有點不同的東西。我們使用了一些不錯但鮮為人知的 CSS 技術來實現我們想要的效果。這是一個包裝！不要忘記，您可以通過單擊下面的鏈接查看演示並下載源代碼，如果您有任何問題、意見或反饋，您也可以將它們留在下面。