跳至主要內容

动画/滚动

Bing🐣大约 2 分钟

提示

导航数据完善中，欢迎 👏👏 通过 PR 或者下方评论的形式提供其他未收集的站点。 站点图标可以放到 websites open in new window 目录下

动画/滚动

通用

Lottie
Lottie
一个适用于Android, iOS, Web和Windows的动画库
Popmotion
Popmotion
一款支持数字、颜色和复杂字符串的关键帧和弹簧动画。
Anime.js
Anime.js
一个轻量级的JavaScript动画库，具有简单而强大的API。
Mo.js
Mo.js
一个javascript动态图形库，声明性 API 提供了对动画的完全控制，使其易于定制。
Hover effect
Hover effect
用于在悬停时绘制图像和动画图像的 Javascript 库。
- icon: '@websites/github.png'
  name: Lottie
  desc: 一个适用于Android, iOS, Web和Windows的动画库
  link: https://github.com/airbnb/lottie

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

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

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

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

CSS

Animate.css
Animate.css
一个跨浏览器的CSS动画库。
Magic
Magic
带有特殊效果的 CSS3 动画。
SpinKit
SpinKit
纯 CSS 动画加载 Loading 集合。
Css-Loaders
Css-Loaders
纯 CSS 动画加载 Loading 集合。
Whirl
Whirl
创建各样的 CSS 加载动画。
- icon: '@websites/github.png'
  name: Animate.css
  desc: 一个跨浏览器的CSS动画库。
  link: https://github.com/animate-css/animate.css

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

- icon: '@websites/github.png'
  name: SpinKit
  desc: 纯 CSS 动画加载 Loading 集合。
  link: https://github.com/tobiasahlin/SpinKit

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

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

Canvas

Fabric.js
Fabric.js
Javascript画布库，Svg to Canvas (& Canvas -to svg)解析器
EaselJS
EaselJS
一个用于在HTML5中构建高性能交互式2D内容的库。
Paper.js
Paper.js
一个运行在 HTML5 Canvas之上的开源矢量图形脚本框架。
Konva.js
Konva.js
一个HTML5 Canvas JavaScript框架，它通过为桌面和移动应用程序实现画布互动来扩展2D环境。
Two.js
Two.js
面向现代网络浏览器的二维绘图 API。
Curtains.js
Curtains.js
一个轻量级的 WebGL javascript 库，可以将 HTML DOM 元素变成互动的纹理平面。
- icon: '@websites/github.png'
  name: Fabric.js
  desc: Javascript画布库，Svg to Canvas (& Canvas -to svg)解析器
  link: https://github.com/fabricjs/fabric.js

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

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

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

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

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

滚动

AOS
AOS
一个简单的页面滚动动画实现。
ScrollReveal
ScrollReveal
在元素进入/离开视口时轻松地对元素进行动画处理。
WOW
WOW
滚动的时候轻松自定义动画设置：样式、延迟、长度、偏移、迭代...
Sal
Sal
注重性能且轻量级滚动动画库。
- icon: '@websites/github.png'
  name: AOS
  desc: 一个简单的页面滚动动画实现。
  link: https://github.com/michalsnik/aos

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

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

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

视差

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

打字机

Malarkey
Malarkey
一个 JavaScript 类型的打字机效果动画库。
Typed.js
Typed.js
一个 JavaScript 类型的打字机效果动画库。
Blotter
Blotter
一个JavaScript API，用于在 Web 上绘制非传统的文本效果。
- icon: '@websites/github.png'
  name: Malarkey
  desc: 一个 JavaScript 类型的打字机效果动画库。
  link: https://github.com/yuanqing/malarkey

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

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