JavaScript 库之 vanilla-tilt（一个平滑的 3D 倾斜库）
- 参考
- 获取
- vanilla-tilt
- 特点
- 使用
- 示例
- 使用
- 1. data-tilt
- 2. VanillaTilt.init()
- 优先级
- 示例
- 配置选项
- 其他
参考
| 项目 | 描述 |
|---|---|
| GitHub | 前往 |
| Vanilla-tilt.js | 前往 |
获取
- Vanilla-tilt.js
- GitHub
- npm
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>
*{
/* 去除元素默认的内外边距 */
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>
效果：
使用
为目标元素应用倾斜样式可以有两种方式。
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>
效果：
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>
效果：
可以看到目标元素使用了 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. |
