JavaScript 库之 vanilla-tilt（一个平滑的 3D 倾斜库）

时间：2023-01-19 07:54:08

JavaScript 库之 vanilla-tilt（一个平滑的 3D 倾斜库）

参考

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

获取

  1. Vanilla-tilt.js
  2. GitHub
  3. npm
npm install vanilla-tilt

vanilla-tilt

vanilla-tilt.js 是 JavaScript 中的一个平滑的 3D 倾斜库，该库存在 JQuery 版本——Tilt.js 。

JavaScript 库之 vanilla-tilt（一个平滑的 3D 倾斜库）

特点

vanilla-tilt 存在以下特点：

  1. 轻量级
  2. 无依赖项
  3. 使用简单
  4. 60 FPS
  5. 丝滑

使用

示例

<!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>
        *{
            /* 去除元素默认的内外边距 */
            margin: 0px;
            padding: 0px;
        }

        body{
            /* 设置显示区域的最小高度值为显示窗口的高度值 */
            min-height: 100vh;
            /* 使 body 中的元素居中显示 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #card{
            /* 为目标元素指定宽高并为其设置渐变背景颜色 */
            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>

	<!-- 导入 vanilla-tilt.js -->
	<script src="./vanilla-tilt.js"></script>
	<script>
    	VanillaTilt.init(document.querySelector('#card'), {
        	max: 15 // 设置倾斜的最大角度
    	});
	</script>
</body>
</html>

效果：

JavaScript 库之 vanilla-tilt（一个平滑的 3D 倾斜库）

使用

为目标元素应用倾斜样式可以有两种方式。

1. data-tilt

我们可以通过为元素添加属性 data-tilt 来指定该元素为目标元素并为其应用默认的倾斜配置。如果对默认的倾斜配置中的某个选项不满，需要对其进行更换，则可以通过为目标元素添加合适的属性并为其设置满意的属性值即可。

如下示例将设置 #card 元素为目标元素并将其 max 配置选项的值设置为 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>
        *{
            /* 去除元素默认的内外边距 */
            margin: 0px;
            padding: 0px;
        }

        body{
            /* 设置显示区域的最小高度值为显示窗口的高度值 */
            min-height: 100vh;
            /* 使 body 中的元素居中显示 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #card{
            /* 为目标元素指定宽高并为其设置渐变背景颜色 */
            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>

	<!-- 导入 vanilla-tilt.js -->
	<script src="./vanilla-tilt.js"></script>
</body>
</html>

效果：

JavaScript 库之 vanilla-tilt（一个平滑的 3D 倾斜库）

2. VanillaTilt.init()

VanillaTilt.init() 函数接收两个参数，第一个参数为需要添加倾斜效果的元素对象，第二个参数则是用于添加倾斜效果的配置对象。

如下示例将设置 #card 元素为目标元素并将其 max 配置选项的值设置为 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>
        *{
            /* 去除元素默认的内外边距 */
            margin: 0px;
            padding: 0px;
        }

        body{
            /* 设置显示区域的最小高度值为显示窗口的高度值 */
            min-height: 100vh;
            /* 使 body 中的元素居中显示 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #card{
            /* 为目标元素指定宽高并为其设置渐变背景颜色 */
            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>

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

优先级

当使用 data-tilt-{option} 及 VanillaTilt.init() 同时对配置选项进行设置时，将优先使用 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>
        *{
            /* 去除元素默认的内外边距 */
            margin: 0px;
            padding: 0px;
        }

        body{
            /* 设置显示区域的最小高度值为显示窗口的高度值 */
            min-height: 100vh;
            /* 使 body 中的元素居中显示 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #card{
            /* 为目标元素指定宽高并为其设置渐变背景颜色 */
            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>

    <!-- 导入 vanilla-tilt.js -->
    <script src="./vanilla-tilt.js"></script>
    <script>
        VanillaTilt.init(document.querySelector('#card'), {
            max: 10,
            scale: 2 // 在鼠标悬停于目标元素之上时，将目标元素放缩指定倍数 
        })
    </script>
</body>
</html>

效果：

JavaScript 库之 vanilla-tilt（一个平滑的 3D 倾斜库）
可以看到目标元素使用了 data-tilt-max 所设定的配置选项的值，忽视了 VanillaTilt.init() 提供的 max 及 scale 。

配置选项

项目 默认值 描述
reverse false 反转倾斜方向（设置为 true 时，鼠标在目标元素悬浮时该处会向屏幕内测倾斜，默认向屏幕外侧倾斜）
max 35 最大倾斜角度。
scale 1 设置鼠标悬浮于目标元素时，目标元素的放缩倍数。
glare false 如果设置为 True，则会在鼠标悬停的位置制*光效果，反光效果仅出现在目标元素的下面部分。
max-glare 1 设置反光强度，取值范围为 0~1，该配置选项的值越是接近于 1 反光强度越大。反光强度的大小可以理解为 照到目标元素的那束光的光照强度 。该配置选项为 0 时与 glare 设置为 false 时的效果无异。
axis null 设置被激活的坐标轴，被禁用的坐标轴将不会产生倾斜效果。该配置选项的取值有 x、y 及 null。其中 null 表示同时激活 x 与 y 轴。
reset true 当该选项设置为 false 时，鼠标若离开目标元素，目标元素将维持鼠标离开前的状态（倾斜状态及放缩状态）。若该选项设置为 true，鼠标若离开目标元素，目标元素将被去除倾斜状态及放缩状态。
startX 0 设置目标元素在 x 轴上的初始默认状态。若要使用该选项，需要保证配置选项 reset 及 reset-to-start 的值均为 true 。
startY 0 设置目标元素在 y 轴上的初始默认状态。若要使用该选项，需要保证配置选项 reset 及 reset-to-start 的值均为 true 。
reset-to-start true 若该选项设置为 true，鼠标离开目标元素时，目标元素的倾斜状态将恢复至配置选项 startX 及 startY 指定的倾斜状态。
full-page-listening false 当该配置选项设置为 true 时，目标元素将响应当前页面的任何鼠标移动（鼠标即使没有悬停在目标元素中，也可以通过鼠标移动控制目标元素的倾斜状态）。

其他

配置选项中还存在其他选项，但目前这些选项我并没有弄清楚他们的用法。为避免误人子弟，我并没有对这些选项进行翻译，请见谅。

项目 默认值 描述
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.
标签：

相关文章