vanilla-tilt.js(一个流畅的 3D 倾斜 JavaScript 库,源自 Tilt.js(jQuery 版本)。)
vanilla-tilt.js
是一个纯 JavaScript 库,用于创建平滑的 3D 倾斜效果。它源自 Tilt.js
,后者是一个 jQuery 版本的库。
以下是如何使用 vanilla-tilt.js
的基本示例:
- 首先,在你的 HTML 文件中包含
vanilla-tilt.js
库。你可以通过 CDN 或者下载到本地后引入。
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
- 接着,确保你的 HTML 元素有一个类名或者 ID,以便于初始化倾斜效果。
<div class="tilt-element">Tilt Me</div>
- 最后,使用 JavaScript 初始化倾斜效果。
// 通过类名初始化
const tiltElement = document.querySelector('.tilt-element');
vanillaTilt.init(tiltElement);
// 或者通过选择器初始化多个元素
const tiltElements = document.querySelectorAll('.tilt-element');
tiltElements.forEach(element => vanillaTilt.init(element));
这样就完成了 vanilla-tilt.js
的基本使用。你还可以通过传递选项来自定义效果,例如:
vanillaTilt.init(element, {
max: 25, // 最大倾斜度
startX: 50, // 初始 X 轴倾斜度
startY: 50, // 初始 Y 轴倾斜度
perspective: 300 // 透视距离
});
vanilla-tilt.js
提供了丰富的选项和事件,可以帮助你创建各种各样的 3D 倾斜效果。
评论已关闭