tilt.js 套件 - 3D 互動效果

發表於 分類於
使用外掛讓網頁有 3D 互動效果

// 2022 The F2E 官網互動效果

套件版本

該套件有兩種版本：

  1. jQuery 版：Tilt.js。
  2. JS 版：Vanilla-Tilt。( 本筆記使用此版 )

安裝

可使用 ① npm 、② 下載文件中的 js 檔到專案內、③ CDN 方式 ( 本筆記使用方式 )。

1
https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js

結構

tilt.js 套件的套用方式 ① HTML ② JS 可擇一選擇。

① HTML 方式

Codepen 範例

1
2
3
4
5
<img src="網址" alt="" 
data-tilt 
data-tilt-max="25" 
data-tilt-scale="1.1" 
>
  • 在要套用的元素先加上 data-tilt，再依序於 data-tilt- 後方加上想要的效果屬性與數值，如果要傾斜角度 25 度，則為 data-tilt-max="25"。

② JS 方式

Codepen 範例

1
2
3
4
// 使用.querySelector() 方式來選取要操作的 DOM。
VanillaTilt.init(document.querySelector('選擇器'), {
  ...
});
  • 直接把效果寫在 {} 中。

屬性

  • reverse：反轉傾斜方向
  • max：最大傾斜旋轉角度
  • startX：X 軸上的起始傾斜度，以度為單位
  • startY：Y 軸上的起始傾斜度，以度為單位
  • perspective：變換透視，越低傾斜越極端。可參考文件中的 「 Creating a parallax effect 」。
  • scale：hover 放大多少 ( 2 = 200%, 1.5 = 150%, etc.. )
  • speed：hover 進入 / 退出轉換的速度。( 傾斜轉換的速度 )
  • transition：hover 進入 / 退出的設置轉換。
  • axis：要禁用哪個軸 ( X 或 Ｙ )
  • reset：傾斜效果必須在退出時重置
  • easing：hover 進入 / 退出時的緩衝。
  • glare：是否開啟眩光效果。
  • "max-glare"：最大炫光不透明度
  • "glare-prerender"：
  • "mouse-event-element"：用滑鼠事件監聽 CSS 選擇器或 HTML 元素。
  • gyroscope：啟用/禁用設備方向檢測的布林值。
  • gyroscopeMinAngleX：這是 X 軸上設備角度的下限，這意味著以該角度旋轉的設備會傾斜元素，就好像鼠標在元素的底部邊框上一樣。
  • gyroscopeMaxAngleX：這是 X 軸上設備角度的上限，這意味著以該角度旋轉的設備會傾斜元素，就好像鼠標在元素的底部邊框上一樣。
  • gyroscopeMinAngleY：這是 Y 軸上設備角度的下限，這意味著以該角度旋轉的設備會傾斜元素，就好像鼠標在元素的底部邊框上一樣。
  • gyroscopeMaxAngleY：這是 Y 軸上設備角度的上限，這意味著以該角度旋轉的設備會傾斜元素，就好像鼠標在元素的底部邊框上一樣。

參考資訊