动画/滚动

Bing🐣2023/1/25大约 2 分钟

提示

导航数据完善中，欢迎 👏👏 通过 PR 或者点击下方的在 GitHub 上编辑此页提供其他未收集的站点

动画/滚动

通用

Lottie

一个适用于Android, iOS, Web和Windows的动画库

Popmotion

一款支持数字、颜色和复杂字符串的关键帧和弹簧动画。

Anime.js

一个轻量级的JavaScript动画库，具有简单而强大的API。

Mo.js

一个javascript动态图形库，声明性 API 提供了对动画的完全控制，使其易于定制。

Hover effect

用于在悬停时绘制图像和动画图像的 Javascript 库。

- icon: 'https://api.liubing.me/favicon/airbnb.io/lottie.png'
  name: Lottie
  desc: 一个适用于Android, iOS, Web和Windows的动画库
  link: https://airbnb.io/lottie/#/
  github: https://github.com/airbnb/lottie

- icon: 'https://api.liubing.me/favicon/popmotion.io.png'
  name: Popmotion
  desc: 一款支持数字、颜色和复杂字符串的关键帧和弹簧动画。
  link: https://popmotion.io/
  github: https://github.com/Popmotion/popmotion

- icon: 'https://api.liubing.me/favicon/animejs.com.png'
  name: Anime.js
  desc: 一个轻量级的JavaScript动画库，具有简单而强大的API。
  link: https://animejs.com/
  github: https://github.com/juliangarnier/anime

- icon: 'https://api.liubing.me/favicon/mojs.github.io.png'
  name: Mo.js
  desc: 一个javascript动态图形库，声明性 API 提供了对动画的完全控制，使其易于定制。
  link: https://mojs.github.io/
  github: https://github.com/mojs/mojs

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Hover effect
  desc: 用于在悬停时绘制图像和动画图像的 Javascript 库。
  link: https://github.com/robin-dela/hover-effect
  github: https://github.com/robin-dela/hover-effect

CSS

纯 CSS 动画加载 Loading 集合。

Css-Loaders

纯 CSS 动画加载 Loading 集合。

Whirl

创建各样的 CSS 加载动画。

- icon: 'https://api.liubing.me/favicon/animate.style.png'
  name: Animate.css
  desc: 一个跨浏览器的CSS动画库。
  link: https://animate.style/
  github: https://github.com/animate-css/animate.css

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Magic
  desc: 带有特殊效果的 CSS3 动画。
  link: https://github.com/miniMAC/magic
  github: https://github.com/miniMAC/magic

- icon: 'https://api.liubing.me/favicon/tobiasahlin.com/spinkit.png'
  name: SpinKit
  desc: 纯 CSS 动画加载 Loading 集合。
  link: https://tobiasahlin.com/spinkit/
  github: https://github.com/tobiasahlin/SpinKit

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Css-Loaders
  desc: 纯 CSS 动画加载 Loading 集合。
  link: https://github.com/lukehaas/css-loaders
  github: https://github.com/lukehaas/css-loaders

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Whirl
  desc: 创建各样的 CSS 加载动画。
  link: https://github.com/jh3y/whirl
  github: https://github.com/jh3y/whirl

Canvas

Fabric.js

Javascript画布库，Svg to Canvas (& Canvas -to svg)解析器

EaselJS

一个用于在HTML5中构建高性能交互式2D内容的库。

Paper.js

一个运行在 HTML5 Canvas之上的开源矢量图形脚本框架。

Konva.js

一个HTML5 Canvas JavaScript框架，它通过为桌面和移动应用程序实现画布互动来扩展2D环境。

Two.js

面向现代网络浏览器的二维绘图 API。

Curtains.js

一个轻量级的 WebGL javascript 库，可以将 HTML DOM 元素变成互动的纹理平面。

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Fabric.js
  desc: Javascript画布库，Svg to Canvas (& Canvas -to svg)解析器
  link: https://github.com/fabricjs/fabric.js

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: EaselJS
  desc: 一个用于在HTML5中构建高性能交互式2D内容的库。
  link: https://github.com/CreateJS/EaselJS

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Paper.js
  desc: 一个运行在 HTML5 Canvas之上的开源矢量图形脚本框架。
  link: https://github.com/paperjs/paper.js

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Konva.js
  desc: 一个HTML5 Canvas JavaScript框架，它通过为桌面和移动应用程序实现画布互动来扩展2D环境。
  link: https://github.com/konvajs/konva

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Two.js
  desc: 面向现代网络浏览器的二维绘图 API。
  link: https://github.com/jonobr1/two.js

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Curtains.js
  desc: 一个轻量级的 WebGL javascript 库，可以将 HTML DOM 元素变成互动的纹理平面。
  link: https://github.com/martinlaxenaire/curtainsjs

滚动

AOS

一个简单的页面滚动动画实现。

ScrollReveal

在元素进入/离开视口时轻松地对元素进行动画处理。

WOW

滚动的时候轻松自定义动画设置：样式、延迟、长度、偏移、迭代...

Sal

注重性能且轻量级滚动动画库。

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: AOS
  desc: 一个简单的页面滚动动画实现。
  link: https://github.com/michalsnik/aos

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: ScrollReveal
  desc: 在元素进入/离开视口时轻松地对元素进行动画处理。
  link: https://github.com/jlmakes/scrollreveal

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: WOW
  desc: 滚动的时候轻松自定义动画设置：样式、延迟、长度、偏移、迭代...
  link: https://github.com/matthieua/WOW

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Sal
  desc: 注重性能且轻量级滚动动画库。
  link: https://github.com/mciastek/sal

视差

Rellax

轻量级的 vanilla javascript 视差库。

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Rellax
  desc: 轻量级的 vanilla javascript 视差库。
  link: https://github.com/dixonandmoe/rellax

打字机

Malarkey

一个 JavaScript 类型的打字机效果动画库。

Typed.js

一个 JavaScript 类型的打字机效果动画库。

Blotter

一个JavaScript API，用于在 Web 上绘制非传统的文本效果。

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Malarkey
  desc: 一个 JavaScript 类型的打字机效果动画库。
  link: https://github.com/yuanqing/malarkey

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Typed.js
  desc: 一个 JavaScript 类型的打字机效果动画库。
  link: https://github.com/mattboldt/typed.js

- icon: 'https://api.liubing.me/favicon/github.com.png'
  name: Blotter
  desc: 一个JavaScript API，用于在 Web 上绘制非传统的文本效果。
  link: https://github.com/bradley/Blotter