lax.js

实现当页面滚动时创建流畅和漂亮的动画

开源推荐 - 图1

Pace.js

https://www.jiawin.com/p/3928

https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59

Aos.js

导入

  1. <link rel="stylesheet" href="dist/aos.css" />
  2. <script src="js/jquery.min.js"></script>
  3. <script src="dist/aos.js"></script>

HTML

  1. <div aos="animation_name">

属性

  • aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120
  • aos-duration 动画持续时间 600 400
  • aos-easing 动画的easing动画效果 ease-in-sine ease
  • aos-delay 动画的延迟时间 300 0
  • aos-anchor 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 #selector null
  • aos-anchor-placement 锚位置，触发动画时元素位于屏幕的位置 top-center top-bottom
  • aos-once 动画是否只会触发一次，或者每次上下滚动都会触发 true false

全局配置

  1. AOS.init({
  2.   offset: 200,
  3.   duration: 600,
  4.   easing: 'ease-in-sine',
  5.   delay: 100,
  6. });

禁用AOS

  1. # 在小屏幕设备中禁用AOS
  2. AOS.init({
  3.   disable: 'mobile' # mobile、phone或tablet
  4. });

动画

淡入淡出动画：

  • fade-up
  • fade-down
  • fade- -left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

翻转动画：

  • flip-up
  • flip-down
  • flip-left
  • flip-right

滑动动画：

  • slide-up
  • slide-do- wn
  • slide-left
  • slide-right

缩放动画：

  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

锚位置

  • top-bottom
  • top-center
  • top-top
  • center-bottom
  • center-center
  • center-top
  • bottom-bottom
  • bottom-center
  • bottom-top

easing动画

你可以使用以下的一些easing动画效果：

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • ease-in-back
  • ease-out-back
  • ease-in-out-back
  • ease-in-sine
  • ease-out-sine
  • ease-in-out-sine
  • ease-in-quad
  • ease-out-quad
  • ease-in-out-quad
  • ease-in-cubic
  • ease-out-cubic
  • ease-in-out-cubic
  • ease-in-quart
  • ease-out-quart
  • ease-in-out-quart

wow.js

依赖animate.css
animate.min.css

AlloyTouch

AlloyTouch 是一款触摸框架，能方便的获取触摸滑动距离。