Plax 技术文档

2024-12-24 12:44:38作者：魏献源Searcher

1. 安装指南

Plax 是一个基于 jQuery 的插件，您需要确保您的项目中已经包含了 jQuery 库。以下是包含 jQuery 和 Plax 的基本步骤：

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/plax.js"></script>

确保这些脚本标签位于您的 HTML 文档的 <head> 部分。

2. 项目的使用说明

在您的 JavaScript 代码中，您需要指定哪些元素将使用视差效果。这通过调用 .plaxify() 方法并传递相应的参数来完成。以下是一个基本的使用示例：

$('#plax-octocat').plaxify({"xRange":40,"yRange":40})
$('#plax-earth').plaxify({"xRange":20,"yRange":20,"invert":true})
$('#plax-bg').plaxify({"xRange":10,"yRange":10,"invert":true})
$.plax.enable()

这会将指定的元素添加到视差效果的列表中，并通过 .enable() 方法启动 Plax。

您还可以通过在元素上设置数据属性来指定参数，然后一次性将它们 .plaxify()。

<img src="octocat.png" data-xrange="40" data-yrange="40">
<img src="earth.png" data-xrange="20" data-yrange="20">
<img src="bg.png" data-xrange="10" data-yrange="10" data-invert="true">

$('img').plaxify()
$.plax.enable()

如果您想只在特定的元素被鼠标悬停时应用视差效果，您可以为 .enable() 方法提供一个 activityTarget 参数。

$.plax.enable({ "activityTarget": $('#myPlaxDiv')})

3. 项目API使用文档

以下是 Plax 提供的 API 方法的详细说明：

plaxify()

将一个元素添加到视差效果的列表中。

参数：
- xRange: 元素在 x 轴上移动的距离。
- yRange: 元素在 y 轴上移动的距离。
- invert: 可选，是否反转元素移动的方向。
- useTransform: 可选，是否使用 CSS 的 translate3d 属性。
enable()

启动视差效果。

参数：
- activityTarget: 可选，指定一个 DOM 元素，仅在鼠标悬停该元素上时跟踪鼠标。
- gyroRange: 可选，设置达到一个方向全移动所需的倾斜角度。
disable()

禁用视差效果。

参数：
- restorePositions: 可选，在禁用时是否将所有元素重置到原始位置。
- clearLayers: 可选，在禁用时是否清除所有定义的视差层。