前端技术

页面模糊滚动插件 lenis

lenis 是一款用于实现网页平滑滚动的轻量级 JS 插件。

安装

npm i @studio-freight/lenis

引入

import Lenis from '@studio-freight/lenis'

配置

const lenis = new Lenis({
  lerp: 0.1,
  smooth: true,
  direction: 'vertical',
})

function raf() {
  lenis.raf()
  requestAnimationFrame(raf)
}

requestAnimationFrame(raf)

lerp 属性值则是控制滚动平滑程度,数值越小,滚动平滑越明显

插件主页

https://github.com/studio-freight/lenis

PUJI Design 朴及设计 (c) 2024. 沪ICP备17052229号