跳转到正文

Sal 是一款注重性能的轻量级滚动动画库,可轻松为进入视口的网页元素添加动态动画。它的安装包不到 2.8 kb,且无需任何依赖,确保简洁流畅的用户体验。

Sal 基于 Intersection Observer API 构建,可高效检测屏幕上何时出现元素,并相应地触发动画。该 API 有助于实现最佳性能,大幅减少监听滚动事件所带来的开销。

集成十分简单:只需为 HTML 元素添加 `data-sal` 属性,开发者即可指定所需的动画效果。还可以使用其他 data 属性或 CSS 变量自定义时长、延迟和缓动效果,从而完全掌控动画行为。支持的动画包括淡入淡出、滑动、缩放和翻转等效果。

Sal 还提供高级功能,允许在初始化后修改选项,从而根据用户交互灵活调整。它支持事件监听器,可处理元素进入或离开视口的情况,因此适用于需要实时反馈用户滚动行为的交互式应用程序。

功能

  • 轻量(小于 2.8 kb)
  • 无需依赖
  • 元素可见时触发滚动动画
  • 基于 Intersection Observer API
  • 可轻松与 HTML 集成
  • 支持多种动画效果
  • 可自定义时长、延迟和缓动选项
  • 提供元素进入和离开视口时触发的事件
  • 支持使用 CSS 变量设置自定义属性
  • 初始化后可重置和更新选项

相关项目

Tailwind Motion

一款采用简洁新语法的动画库,通过动态效果增强 UI,并注重性能和无障碍体验。

anime.js

这款动画库兼具灵活性和易用性,简化了为 Web 应用创建引人入胜动画的流程。

GSAP

这款动画工具让你轻松创建引人入胜的网页动画和交互效果,带来超越常规过渡效果的用户体验。

Motion One

基于浏览器原生 API 构建的现代 Web 动画库,确保性能出色且文件体积小。

React Spring

这套动画方案可实现流畅、高性能的过渡效果,为各种界面注入活力,提升用户体验。

AutoAnimate

轻松为 Web 应用添加精彩动画。

Framer Motion

强大的工具,只需少量代码,即可在 React 应用中创建出色的动画。

Glaze

基于 GSAP 构建的实用工具类动画框架,只需少量代码即可创建动画。