JavaScript庫之vanilla-tilt使用教程(一個平滑的3D傾斜庫)

更新時間：2023年02月13日 10:21:46 作者：兩個月亮

vanilla-tilt.js是Javascript中一個平滑的3D傾斜庫,可以讓網(wǎng)頁的一些控件變得動態(tài)起來,下面這篇文章主要給大家介紹了關(guān)于JavaScript庫之vanilla-tilt使用的相關(guān)資料,需要的朋友可以參考下

參考

項目	描述
GitHub	前往
Vanilla-tilt.js	前往

描述

項目	描述
操作系統(tǒng)	Windwos 10 專業(yè)版
Edge	108.0.1462.54 (正式版本) (64 位)
vanilla-tilt.js	1.8.0

npm install vanilla-tilt

vanilla-tilt

vanilla-tilt.js 是 JavaScript 中的一個平滑的 3D 傾斜庫，該庫存在 JQuery 版本——Tilt.js 。

特點

vanilla-tilt 存在以下特點：

輕量級
無依賴項
使用簡單
60 FPS
絲滑

使用

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vanilla-tilt</title>
    <style>
        *{
            /* 去除元素默認(rèn)的內(nèi)外邊距 */
            margin: 0px;
            padding: 0px;
        }

        body{
            /* 設(shè)置顯示區(qū)域的最小高度值為顯示窗口的高度值 */
            min-height: 100vh;
            /* 使 body 中的元素居中顯示 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #card{
            /* 為目標(biāo)元素指定寬高并為其設(shè)置漸變背景顏色 */
            width: 200px;
            height: 200px;
            background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180));
        }
    </style>
</head>
<body>
    <!-- 需要添加 3D 傾斜特效的元素 -->
    <div id="card"></div>

	<!-- 導(dǎo)入 vanilla-tilt.js -->
	<script src="./vanilla-tilt.js"></script>
	<script>
    	VanillaTilt.init(document.querySelector('#card'), {
        	max: 15 // 設(shè)置傾斜的最大角度
    	});
	</script>
</body>
</html>

效果：

使用

為目標(biāo)元素應(yīng)用傾斜樣式可以有兩種方式。

1. data-tilt

我們可以通過為元素添加屬性 data-tilt 來指定該元素為目標(biāo)元素并為其應(yīng)用默認(rèn)的傾斜配置。如果對默認(rèn)的傾斜配置中的某個選項不滿，需要對其進(jìn)行更換，則可以通過為目標(biāo)元素添加合適的屬性并為其設(shè)置滿意的屬性值即可。

如下示例將設(shè)置 #card 元素為目標(biāo)元素并將其 max 配置選項的值設(shè)置為 25。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vanilla-tilt</title>
    <style>
        *{
            /* 去除元素默認(rèn)的內(nèi)外邊距 */
            margin: 0px;
            padding: 0px;
        }

        body{
            /* 設(shè)置顯示區(qū)域的最小高度值為顯示窗口的高度值 */
            min-height: 100vh;
            /* 使 body 中的元素居中顯示 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #card{
            /* 為目標(biāo)元素指定寬高并為其設(shè)置漸變背景顏色 */
            width: 200px;
            height: 200px;
            background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180));
        }
    </style>
</head>
<body>
    <!-- 需要添加 3D 傾斜特效的元素 -->
    <div id="card" data-tilt data-tilt-max="25"></div>

	<!-- 導(dǎo)入 vanilla-tilt.js -->
	<script src="./vanilla-tilt.js"></script>
</body>
</html>

效果：

2. VanillaTilt.init()

VanillaTilt.init() 函數(shù)接收兩個參數(shù)，第一個參數(shù)為需要添加傾斜效果的元素對象，第二個參數(shù)則是用于添加傾斜效果的配置對象。

如下示例將設(shè)置 #card 元素為目標(biāo)元素并將其 max 配置選項的值設(shè)置為 25。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vanilla-tilt</title>
    <style>
        *{
            /* 去除元素默認(rèn)的內(nèi)外邊距 */
            margin: 0px;
            padding: 0px;
        }

        body{
            /* 設(shè)置顯示區(qū)域的最小高度值為顯示窗口的高度值 */
            min-height: 100vh;
            /* 使 body 中的元素居中顯示 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #card{
            /* 為目標(biāo)元素指定寬高并為其設(shè)置漸變背景顏色 */
            width: 200px;
            height: 200px;
            background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180));
        }
    </style>
</head>
<body>
    <!-- 需要添加 3D 傾斜特效的元素 -->
    <div id="card"></div>

    <!-- 導(dǎo)入 vanilla-tilt.js -->
    <script src="./vanilla-tilt.js"></script>
    <script>
        VanillaTilt.init(document.querySelector('#card'), {
            max: 25
        })
    </script>
</body>
</html>

優(yōu)先級

當(dāng)使用 data-tilt-{option} 及 VanillaTilt.init() 同時對配置選項進(jìn)行設(shè)置時，將優(yōu)先使用 data-tilt-{option} 提供的配置，VanillaTilt.init() 的所有配置都將失效。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vanilla-tilt</title>
    <style>
        *{
            /* 去除元素默認(rèn)的內(nèi)外邊距 */
            margin: 0px;
            padding: 0px;
        }

        body{
            /* 設(shè)置顯示區(qū)域的最小高度值為顯示窗口的高度值 */
            min-height: 100vh;
            /* 使 body 中的元素居中顯示 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #card{
            /* 為目標(biāo)元素指定寬高并為其設(shè)置漸變背景顏色 */
            width: 200px;
            height: 200px;
            background: linear-gradient(to right bottom, rgb(108, 240, 255), rgb(118, 255, 180));
        }
    </style>
</head>
<body>
    <!-- 需要添加 3D 傾斜特效的元素 -->
    <div id="card" data-tilt data-tilt-max="70"></div>

    <!-- 導(dǎo)入 vanilla-tilt.js -->
    <script src="./vanilla-tilt.js"></script>
    <script>
        VanillaTilt.init(document.querySelector('#card'), {
            max: 10,
            scale: 2 // 在鼠標(biāo)懸停于目標(biāo)元素之上時，將目標(biāo)元素放縮指定倍數(shù) 
        })
    </script>
</body>
</html>

效果：

可以看到目標(biāo)元素使用了 data-tilt-max 所設(shè)定的配置選項的值，忽視了 VanillaTilt.init() 提供的 max 及 scale 。

配置選項

項目	默認(rèn)值	描述
reverse	false	反轉(zhuǎn)傾斜方向（設(shè)置為 true 時，鼠標(biāo)在目標(biāo)元素懸浮時該處會向屏幕內(nèi)測傾斜，默認(rèn)向屏幕外側(cè)傾斜）
max	35	最大傾斜角度。
scale	1	設(shè)置鼠標(biāo)懸浮于目標(biāo)元素時，目標(biāo)元素的放縮倍數(shù)。
glare	false	如果設(shè)置為 True，則會在鼠標(biāo)懸停的位置制造反光效果，反光效果僅出現(xiàn)在目標(biāo)元素的下面部分。
max-glare	1	設(shè)置反光強(qiáng)度，取值范圍為 0~1，該配置選項的值越是接近于 1 反光強(qiáng)度越大。反光強(qiáng)度的大小可以理解為照到目標(biāo)元素的那束光的光照強(qiáng)度。該配置選項為 0 時與 glare 設(shè)置為 false 時的效果無異。
axis	null	設(shè)置被激活的坐標(biāo)軸，被禁用的坐標(biāo)軸將不會產(chǎn)生傾斜效果。該配置選項的取值有 x、y 及 null。其中 null 表示同時激活 x 與 y 軸。
reset	true	當(dāng)該選項設(shè)置為 false 時，鼠標(biāo)若離開目標(biāo)元素，目標(biāo)元素將維持鼠標(biāo)離開前的狀態(tài)（傾斜狀態(tài)及放縮狀態(tài)）。若該選項設(shè)置為 true，鼠標(biāo)若離開目標(biāo)元素，目標(biāo)元素將被去除傾斜狀態(tài)及放縮狀態(tài)。
startX	0	設(shè)置目標(biāo)元素在 x 軸上的初始默認(rèn)狀態(tài)。若要使用該選項，需要保證配置選項 reset 及 reset-to-start 的值均為 true 。
startY	0	設(shè)置目標(biāo)元素在 y 軸上的初始默認(rèn)狀態(tài)。若要使用該選項，需要保證配置選項 reset 及 reset-to-start 的值均為 true 。
reset-to-start	true	若該選項設(shè)置為 true，鼠標(biāo)離開目標(biāo)元素時，目標(biāo)元素的傾斜狀態(tài)將恢復(fù)至配置選項 startX 及 startY 指定的傾斜狀態(tài)。
full-page-listening	false	當(dāng)該配置選項設(shè)置為 true 時，目標(biāo)元素將響應(yīng)當(dāng)前頁面的任何鼠標(biāo)移動（鼠標(biāo)即使沒有懸停在目標(biāo)元素中，也可以通過鼠標(biāo)移動控制目標(biāo)元素的傾斜狀態(tài)）。

其他

配置選項中還存在其他選項，但目前這些選項我并沒有弄清楚他們的用法。為避免誤人子弟，我并沒有對這些選項進(jìn)行翻譯，請見諒。

項目	默認(rèn)值	描述
gyroscope	true	Boolean to enable/disable device orientation detection.
gyroscopeMinAngleX	-45	This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element.
gyroscopeMaxAngleX	45	This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element.
gyroscopeMinAngleY	-45	This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element.
gyroscopeMaxAngleY	45	This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element.
mouse-event-element	null	css-selector or link to HTML-element what will be listen mouse events.
glare-prerender	false	false = VanillaTilt creates the glare elements for you, otherwise you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself.
easing	cubic-bezier(.03,.98,.52,.99)	Easing on enter/exit.
speed	300	Speed of the enter/exit transition.
perspective	1000	Transform perspective, the lower the more extreme the tilt gets.
transition	true	Set a transition on enter/exit.