Lax.js

简单轻量级（<4kb gzipped）JavaScript 库，可在您滚动时创建流畅美观的动画。

>> 演示 <<

Lax.js 2.0 的新功能

Lax.js 2.0 已经完全重新编写，专注于模块化和灵活性，为您提供更多工具来创建出色的动画。

• 新的 javascript 动画语法，允许更高级的效果组合
• 使用任何值来驱动动画，例如鼠标位置、一天中的时间......当然还有滚动！
• 动画可以在滚动时赋予惯性
• 创建自定义 CSS 绑定
• 动画缓动
• 以及更多..

例子

• 滚动效果
• 水平捕捉滚动
• 惯性
• 视频/GIF播放
• 光标位置
• 文字输入
• 更新 HTML 内容
• 预设资源管理器

文档

1. 入门

• 设置
• 使用预设
• 与 UI 框架一起使用
• 添加驱动程序
• 添加元素

2. 更深入

• 自定义动画
• 优化性能

3. 词汇表

• CSS 属性
• 特殊值
• 支持的缓动

入门

NPM 设置

# https://www.npmjs.com/package/lax.js

npm install lax.js
yarn add lax.js

import lax from 'lax.js'

HTML 设置

<script src="path-to-lax.min.js"></script>
<!-- or via CDN -->
<script src="https://cdn.jsdelivr.net/npm/lax.js" ></script>

设置

要实现 lax，您需要创建至少一个 驱动程序 ，为动画提供值，以及元素动画绑定。下面是一个简单的例子：

<!-- JS -->
<script>
  window.onload = function () {
    lax.init()

    // Add a driver that we use to control our animations
    lax.addDriver('scrollY', function () {
      return window.scrollY
    })

    // Add animation bindings to elements
    lax.addElements('.selector', {
      scrollY: {
        translateX: [
          ["elInY", "elCenterY", "elOutY"],
          [0, 'screenWidth/2', 'screenWidth'],
        ]
      }
    })
  }
</script>

<!-- HTML -->
<div class="selector">Hello</div>

使用预设

最简单的入门方法是通过 html 类使用预设。例如：

<div class="lax lax_preset_fadeIn:50:100 lax_preset_spin"></div>

多个预设可以链接在一起，并且可以根据您的需要进行定制。使用预设资源管理器探索效果并在此处查看一个简单示例。