快捷導(dǎo)航

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

更新時(shí)間：2023年02月13日 10:21:46 作者：兩個(gè)月亮

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

參考

項(xiàng)目	描述
GitHub	前往
Vanilla-tilt.js	前往

描述

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

npm install vanilla-tilt

vanilla-tilt

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

特點(diǎn)

vanilla-tilt 存在以下特點(diǎn)：

輕量級(jí)
無(wú)依賴(lài)項(xiàng)
使用簡(jiǎn)單
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

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

如下示例將設(shè)置 #card 元素為目標(biāo)元素并將其 max 配置選項(xiàng)的值設(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ù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)為需要添加傾斜效果的元素對(duì)象，第二個(gè)參數(shù)則是用于添加傾斜效果的配置對(duì)象。

如下示例將設(shè)置 #card 元素為目標(biāo)元素并將其 max 配置選項(xiàng)的值設(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)先級(jí)

當(dāng)使用 data-tilt-{option} 及 VanillaTilt.init() 同時(shí)對(duì)配置選項(xiàng)進(jìn)行設(shè)置時(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)元素之上時(shí)，將目標(biāo)元素放縮指定倍數(shù) 
        })
    </script>
</body>
</html>

效果：

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

配置選項(xiàng)

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

其他

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

項(xiàng)目	默認(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.