vanilla-tilt.js(一个流畅的 3D 倾斜 JavaScript 库，源自 Tilt.js（jQuery 版本）。)

作者：System 时间：2024年08月21日分类：所有,jquery 字数：976

这篇文章距离上次修改已过258天，其中的内容可能已经有所变动。

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 倾斜效果。

vanilla-tilt.js(一个流畅的 3D 倾斜 JavaScript 库，源自 Tilt.js（jQuery 版本）。)

评论已关闭

推荐阅读