Lax.js 开源项目教程

谢月连Jed

于 2024-08-10 08:02:34 发布

阅读量176

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00979/article/details/141081132

版权

Lax.js 开源项目教程

lax.jsSimple & lightweight (<4kb gzipped) vanilla JavaScript library to create smooth & beautiful animations when you scroll.项目地址:https://gitcode.com/gh_mirrors/la/lax.js

项目介绍

Lax.js 是一个轻量级 (<4kb gzipped) 的原生 JavaScript 库，旨在创建平滑且美观的滚动动画。它通过简单的 API 和预设，使得开发者能够轻松地在网页滚动时添加动态效果。Lax.js 完全重写了 2.0 版本，专注于模块化和灵活性，提供了更多的自定义选项和改进的性能。

项目快速启动

安装

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

npm install lax.js

或者通过 CDN 引入：

<script src="https://cdn.jsdelivr.net/npm/lax.js"></script>

基本使用

以下是一个简单的示例，展示如何在页面加载后初始化 Lax.js，并添加一个滚动驱动器和动画绑定：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lax.js 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/lax.js"></script>
</head>
<body>
    <div class="selector">Hello</div>

    <script>
        window.onload = function () {
            lax.init();

            // 添加一个滚动驱动器
            lax.addDriver('scrollY', function () {
                return window.scrollY;
            });

            // 添加动画绑定到元素
            lax.addElements('.selector', {
                scrollY: {
                    translateX: [
                        ["elInY", "elCenterY", "elOutY"],
                        [0, 'screenWidth/2', 'screenWidth']
                    ]
                }
            });
        };
    </script>
</body>
</html>