lax.js

特点

• 轻量级：仅2KB（压缩后），加载速度快。
• 易于使用：提供简单的API和多种预设动画，快速上手。
• 高性能：基于scroll事件，优化了性能。
• 灵活性：支持自定义动画和响应式动画。

使用场景

• 网页动画：在用户滚动页面时，为元素添加动画效果。
• 互动性：增强网页的互动性，提升用户体验。
• 视觉效果：为网站添加平滑且美观的视觉效果，吸引用户注意力。

安装方式

你可以通过npm或yarn来安装Lax.js：

npm install lax.js
# 或者
yarn add lax.js

或者直接在HTML中引入：

<script src="lib/lax.min.js"></script>

使用示例

基本用法

import lax from 'lax.js';

window.onload = function() {
  lax.setup(); // 初始化

  document.addEventListener('scroll', function() {
    lax.update(window.scrollY); // 更新动画
  });
};

HTML 示例

<p data-lax-preset="spin fadeInOut">Look at me goooooo!</p>

常用 API 介绍

• lax.setup()：初始化Lax.js。
• lax.update(scrollY)：更新动画状态，需要在滚动事件中调用。
• lax.addDriver(name, getValueFn)：添加一个驱动器，用于控制动画。
• lax.addElements(selector, animations)：为选定的元素添加动画。
• lax.addElement(domElement)：手动添加元素，适用于动态DOM操作。
• lax.removeElement(domElement)：手动移除元素。

动画预设

Lax.js 提供多种预设动画，可以通过 data-lax-preset 属性使用：

<div class="lax" data-lax-preset="fadeIn-50:100 spin">Laxxx Example</div>

自定义动画

你可以通过添加自定义属性来定义自己的动画：

<p data-lax-opacity="0 1, 100 1, 200 0">
  I start to fade out after the window scrolls 100px and then I'm gone by 200px!
</p>

官方资料

• GitHub 仓库
• 官方文档