搜尋

熱門關鍵字:

最新文章

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. [教學] 免用JS！透過純CSS3 就可製作出，背景式的視差滾動特效

[教學] 免用JS！透過純CSS3 就可製作出，背景式的視差滾動特效

2019/04/08

梅問題－[教學] 透過 CSS3 打造背景式的視差滾動效果
　　雖然視差滾動已不是什麼新特效，但還是有不少朋友相當的喜愛，透過滑鼠的滾動，讓畫面一直停滯在一個區塊，但內容卻會一直不斷的更換，看起來相當的炫，說真的梅干個人不是那麼的喜愛，但應用在產品或是活動頁面上，卻是相當的適合。

  這麼酷炫的特效，大多需要搭配Javascript與CSS，才能達這麼炫的特效，再加上視差滾動的方式相當的多種，而唯一讓梅干比較喜愛的方式，則是背景式的視差滾動，若只是要製作背景式的視差滾動，其實只需透過純CSS3就可以辦到，且設定上還相當的容易，因此喜愛視差滾動的朋友，現在也一塊來看看囉！怎透過純CSS方式來實作出來。

Step1
首先，先建立一個DIV區塊，並命名為<div class="parallax"></div>。
Step2
接著將parallax的CSS樣式，分別設定區塊的高度、背景圖片，以及將背景設為fixed固定。
.parallax {
  /* 設定背景圖片/居中/不重覆 */
  background: url("https://photo.minwt.com/cc0/09.jpg")center center no-repeat;



/* 設定區塊高度 */
  min-height: 600px;



/* 背景自動縮放/固定 */
  background-attachment: fixed;
  background-size: cover;
}
Step3
當完成後，就會看到parallax的div區塊中，自動將背景圖片，整個填滿至div區塊中。 梅問題－[教學] 透過 CSS3 打造背景式的視差滾動效果
Step4
這時再滾動滑鼠時，就會產生出視差滾動的效果啦！是不是超簡單的呀！
梅問題－[教學] 透過 CSS3 打造背景式的視差滾動效果
#範例預覽


css3背景滾動, css視差滾動, 視差滾動,