63

0

lax.js

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

Lax.js

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

松弛 2.0 动图

>> 演示 <<


Lax.js 2.0 的新功能

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

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

例子

文档

1. 入门

2. 更深入

3. 词汇表

入门

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>

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