CSS 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 打造背景式的視差滾動效果
#範例預覽