Hike News
Hike News

css parallax 視差滾動

前言

利用固定圖片 background-attachment: fixed 的方法，讓網頁上下、左右滑動時簡單的產生有前後的效果，或是可以利用各別設定不同的值產生讓每個物件有前後立體變化的錯覺。

background-attachment 是 CSS 的屬性，是設定背景會配合內容或是捲軸作移動，

固定背景

把背景固定，當滾動網頁時就會看到背景外的標籤元素會和背景有前後感覺

1
2
3
4
5
<div class="parallax">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
1
2
3
4
.parallax {
  background-image: url("背景圖.jpg");
  background-attachment: fixed; /* 固定圖像 */
}

在滾動捲軸就可以看到像下圖的效果

固定背景

或是把每一個 <div class="card"></div> 設定不同的背景，當滾動時就會改變背景

多個 div 並固定背景

範例參考 https://codepen.io/stefanjudis/pen/nrzHI

元素變化

利用 transform-style: preserve-3d; 、 perspective: 1px; 和 overflow 這 3 個屬性

transform 可作出 X、Y 軸的位移和旋轉縮放的效果

perspective 可作 3 D 透視的效果，值愈大效果愈不明顯，而值愈小效果就愈大

overflow 設定元素是否可見。overflow-x 和 overflow-y 可設定 X 、 Y 軸超出畫面的部分是否要隱藏的 hidden ，或是設定可滾動的捲軸 scroll 。

首先先固定畫面的高，以及隱藏超出畫面的元素

1
2
3
4
html {
  overflow: hidden;
  height: 100vh;
}

然後在 body 加上透視效果，讓 body 內的元素都具有透視效果

1
2
3
4
5
6
7
8
9
10
11
body {
   /* 若是效果沒出現可加上前綴詞再試試看 */
	-webkit-perspective: 1px;
	-webkit-transform-style: preserve-3d;
  
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
}

在內層的元素加上屬性 transform 的位移、旋轉 … 等就可看到變化

1
2
3
4
5
6
.card {
  transform: translateZ(-1px);
  transform: scale(2);
  transform: translateZ(-1px) scale(2);
  transform: rotate(69deg);
}

上面範例是用 body 作為外層容器，或是指定一個外層容器也是可以

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.parallax { /* 外層容器 */
  overflow: hidden;
  height: 100vh;
}

.parallax__group {  /* 第 二 層加上透視效果 */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;  
  transform-style: preserve-3d;
}

.parallax__layer--base { /* 內容設定要變化的效果 */
  transform: rotate(69deg);

用 jQuery 作視差滾動

要先導入需要的檔案 jQuery 及 Scrolling Parallax jQuery Plugin 

1
2
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.scrolling-parallax.js"></script>

執行時只要載入圖片，插件就會自動把圖片拉伸到填滿容量的大小

1
2
3
4
5
6
7
8
// 載入要有效果的圖片
$.scrollingParallax('img/background-parallax.jpg');

// 設定其他參數
$.scrollingParallax('img/background-parallax.jpg', { 
    bgWidth : '200%', 
    enableHorizontal : true 
});

或者是利用選擇器選取要使用效果的標籤元素

1
2
3
4
5
6
7
$('div.parallax').scrollingParallax();

// 設定其他參數
$('div.parallax-div').scrollingParallax({ 
    staticSpeed : 3, 
    loopIt : true 
});

使用選擇器選取時要注意標籤元素的 CSS 要設定 position: fixed ，官方文件有提到建議要設定，才不會出現奇怪的錯誤

設定參數是用物件的方式，可以設定的屬性有基本的圖片尺寸、滾動的速度、方向

參數設定可到 文件 看看

參考文件

Scrolling Parallax: A jQuery Plugin

設定參數屬性值文件