【组件库】VanillaTilt.js使用教程和配置项说明

VanillaTilt.js

官网：Vanilla-tilt.js

效果：一个平滑的 3D 倾斜库

安装：

npm install vanilla-tilt

基本用法

使用方式有两种：

data-tilt：为元素添加属性 data-tilt 来指定该元素为目标元素并为其应用默认的倾斜配置

    <!-- 需要添加 3D 倾斜特效的元素 --><div id="card" data-tilt data-tilt-max="25"></div>

VanillaTilt.init()：

vanillaTilt.init(获取元素,{产生效果;
})

PS：当使用 data-tilt-{option} 及 VanillaTilt.init() 同时对配置选项进行设置时，将优先使用 data-tilt-{option} 提供的配置，VanillaTilt.init() 的所有配置都将失效。

配置项

配置项	类型/默认值	中文说明
reverse	boolean / false	是否反转倾斜方向（鼠标向左 → 元素向右倾斜）。
max	number / 35	最大倾斜角度（单位：度）。数值越大，倾斜越明显。
startX	number / 0	元素在 X 轴上的初始倾斜角度（单位：度）。
startY	number / 0	元素在 Y 轴上的初始倾斜角度（单位：度）。
perspective	number / 1000	透视深度（CSS perspective 值）。值越小，透视效果越夸张。
scale	number / 1	缩放倍数。例如 1.2 = 120% 。
speed	number / 300	鼠标进入/离开时的过渡动画时长（单位：毫秒）。
transition	boolean / true	是否启用进入/离开过渡动画。
axis	string? / null	限制倾斜轴："x" 仅 X 轴、"y" 仅 Y 轴、null 双向均可。
reset	boolean / true	鼠标离开时是否重置倾斜状态。
reset-to-start	boolean / true	重置时回到初始角度 [startX, startY]；如为 false 则回到 [0, 0]。
easing	string / "cubic-bezier(.03,.98,.52,.99)"	进入/离开过渡动画的缓动函数（CSS easing）。
glare	boolean / false	是否启用眩光（glare）高光效果。
max-glare	number / 1	眩光最大不透明度（范围 0–1，1 = 100%）。
glare-prerender	boolean / false	是否使用预渲染眩光元素；false 时由库自动创建，需手动添加 .js-tilt-glare > .js-tilt-glare-inner 结构。
mouse-event-element	`string?	HTMLElement?/null`	指定监听鼠标事件的元素（CSS 选择器或 DOM 节点）。默认监听当前倾斜元素自身。
gyroscope	boolean / true	是否启用设备陀螺仪（移动设备重力感应）控制。
gyroscopeMinAngleX	number / -45	设备绕 X 轴旋转角度的下限（对应元素左边界）。
gyroscopeMaxAngleX	number / 45	设备绕 X 轴旋转角度的上限（对应元素右边界）。
gyroscopeMinAngleY	number / -45	设备绕 Y 轴旋转角度的下限（对应元素上边界）。
gyroscopeMaxAngleY	number / 45	设备绕 Y 轴旋转角度的上限（对应元素下边界）。

效果

视差效果

给容器元素添加上3D属性：

.card{...其他样式;transform-style:preserve-3d;
}

给动态元素添加上Z轴方向的变化：

.picture{...其他样式;transform:translateZ();
}

炫光效果

开启data-tilt-max-glare属性就可以产生炫光效果

<div data-tilt data-tilt-glare data-tilt-max-glare="0.8"></div>

反向倾斜

<div data-tilt data-tilt-reverse="true"></div>

保持浮动

设置此选项不会在用户鼠标离开元素时重置倾斜元素。

<div data-tilt data-tilt-reset="false"></div>

整页聆听

设置此选项将使元素响应页面上的任何鼠标移动。

<div data-tilt data-tilt-full-page-listening></div>

悬停时缩放

设置此选项将在悬停时缩放倾斜元素。

<div data-tilt data-tilt-scale="1.1"></div>

开始位置

设置此选项将在页面加载时将元素倾斜特定角度。

<div data-tilt data-tilt-startX="20" data-tilt-startY="-20" data-tilt-reset-to-start="true"></div>

“reset-to-start” - 鼠标离开时，将位置重置为 [startX， startY]

销毁方法

调用此方法将从 tilt 元素中删除所有事件和类。

let destroyBox = document.querySelector("#destroy-box");
VanillaTilt.init(destroyBox);document.querySelector("#destroy-button").addEventListener("click", function () {destroyBox.vanillaTilt.destroy();
});document.querySelector("#enable-button").addEventListener("click", function () {VanillaTilt.init(destroyBox);
});

禁用轴

设置此选项将禁用倾斜元素上的 X 轴。

<div data-tilt data-tilt-axis="y"></div>

设置此选项将禁用倾斜元素上的 Y 轴。

<div data-tilt data-tilt-axis="x"></div>