Lenis 项目下载及安装教程

Lenis 项目下载及安装教程

lenis How smooth scroll should be 项目地址: https://gitcode.com/gh_mirrors/le/lenis

1、项目介绍

Lenis 是一个轻量级、健壮且高性能的平滑滚动库。它由 @darkroomengineering 设计，旨在简单易用，并易于集成到您的项目中。Lenis 专注于性能优化，适用于现代浏览器，非常适合在您的网站上创建平滑滚动体验，如 WebGL 滚动同步、视差效果等。

2、项目下载位置

您可以通过以下链接下载 Lenis 项目：

Lenis GitHub 仓库

3、项目安装环境配置

3.1 环境要求

• Node.js (建议版本 >= 14.x)
• npm 或 yarn

3.2 环境配置示例

3.2.1 安装 Node.js

首先，确保您的系统上已安装 Node.js。您可以从 Node.js 官方网站 下载并安装。

3.2.2 安装 npm 或 yarn

Node.js 安装完成后，npm 会自动安装。您也可以选择安装 yarn：

npm install -g yarn

4、项目安装方式

4.1 使用 npm 安装

npm install lenis

4.2 使用 yarn 安装

yarn add lenis

4.3 使用 CDN 引入

<script src="https://unpkg.com/lenis@1.1.14/dist/lenis.min.js"></script>

5、项目处理脚本

5.1 基本使用

// 初始化 Lenis
const lenis = new Lenis();

// 监听滚动事件并记录事件数据
lenis.on('scroll', (e) => {
  console.log(e);
});

// 使用 requestAnimationFrame 持续更新滚动
function raf(time) {
  lenis.raf(time);
  requestAnimationFrame(raf);
}

requestAnimationFrame(raf);

5.2 推荐 CSS

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

5.3 GSAP ScrollTrigger 集成

// 初始化 Lenis 实例以实现平滑滚动
const lenis = new Lenis();

// 监听 'scroll' 事件并将事件数据记录到控制台
lenis.on('scroll', (e) => {
  console.log(e);
});

// 将 Lenis 滚动与 GSAP 的 ScrollTrigger 插件同步
lenis.on('scroll', ScrollTrigger.update);

// 将 Lenis 的 requestAnimationFrame (raf) 方法添加到 GSAP 的 ticker
// 这确保了 Lenis 的平滑滚动动画在每个 GSAP 滴答声中更新
gsap.ticker.add((time) => {
  lenis.raf(time * 1000); // 将时间从秒转换为毫秒
});

// 禁用 GSAP 中的滞后平滑以防止滚动动画中的任何延迟
gsap.ticker.lagSmoothing(0);

通过以上步骤，您可以成功下载并安装 Lenis 项目，并开始在您的项目中使用它来实现平滑滚动效果。

lenis How smooth scroll should be 项目地址: https://gitcode.com/gh_mirrors/le/lenis