前端动画库
- JS库
- 视觉差
- 小面积复杂动画-SVG
- 滚动条动画
- 文字
- 跨页面
- 粒子
- CSS库
JS库
greensock
比较全面的动画库,但是部分组件需要会员官网
Kute
Kute.js 是一个原生的 Javascript 动画引擎,具有优秀的性能和模块化的代码。 它提供了一大堆工具,以帮助创建自定义动画。它提供了易于使用的方法来设置高性能、跨浏览器的动画。
github
aminerman–Vue
官网
视觉差
parallax.js
JavaScript 视觉差特效引擎插件。通过这个视觉差插件可以制作出非常炫酷的视觉差特效,可以检测智能设备的方向。
官网
Simple Parallax
simpleParallax.js 是一个非常简单且小巧的 Vanilla JS 库,可在任何图像上添加视差动画。它因其易用性和可视化渲染而脱颖而出。视差效果直接应用于图像标签,无需使用背景图像。
github
小面积复杂动画-SVG
Mo.js
用于 Web 的动态图形工具带,具有简单的声明 API,跨设备兼容性和超过1500个单元测试。您可以在DOME或SVG DOME周围移动东西或创建唯一的 mo.js 对象。虽然文档有些稀缺,但是示例很丰富,这里有CSS技巧的介绍。
github
Vivus
可以让你为SVG制作动画,让它们具有被绘制的外观。
github
滚动条动画
Lax.js
原生零依赖的制作跟随页面滑动的 JavaScript 动画插件。当滑动页面时,帮助创建酷炫的动画效果,比如滚动视差、变形移动等基本的动画效果,响应式兼容方面,比如手机端也有不错的支持。除了可以使用插件默认集成的动画属性,还可以自定义更加丰富的动画属性。
官网github
Scroll Reveal
这个库为 web 和移动浏览器提供了简单的滚动动画,以动画的方式显示滚动中的内容。
github教程
WOW.js
WOW.js 是一款帮助你实现滚动页面时触发 CSS 动画效果的插件
官网github
Rellax.js
rellax.js是一款轻量级的纯JavaScript滚动视觉差特效插件。rellax.js压缩后的版本仅871字节,在手机等小屏幕设备中,插件会自动限制视觉差特性。
github
Animate on Scroll
Animate on Scroll是一个在页面时创建动画的JavaScript动画库。
github
文字
Typed.js
打字机
github
跨页面
Barba
Barba.js是一个小(4kb的压缩和压缩),灵活和无依赖的库,可以帮助您创建流畅和平滑的过渡网站的页面。 它可以减少页面之间的延迟,最大限度地减少浏览器HTTP请求并增强用户的Web体验。
github
粒子
Particles.js
Particles.js 一个轻量级的JavaScript库,用来在网页上创建颗粒效果。
github
tsParticles
tsParticles可以轻松创建高度可定制的粒子动画并将它们用作网站的动画背景。
github
CSS库
Hover
CSS3支持的悬停效果集合,可应用于链接、按钮、徽标、SVG、特色图像等,在CSS、Sass和LESS中可用。
github
animista
可在线调试修改动画属性
官网