实用的纯JS和CSS3页面滚动动画库插件

当前位置:主页 > CSS3库 > CSS3动画 > 实用的纯JS和CSS3页面滚动动画库插件
实用的纯JS和CSS3页面滚动动画库插件
分享:

    插件介绍

    kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件。通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-15
    阅读:
麦子学院
简要教程

kissui.scrollanim是一款实用的纯JS和CSS3页面滚动动画库插件。通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果。

安装

可以通过bower来安装kissui.scrollanim插件。

bower install kissui.scrollanim                  
                

使用方法

在页面中引入scrollanim.css和scrollanim.js文件。

<link rel="stylesheet" href="css/scrollanim.css">
<script src="js/scrollanim.js"></script>                  
                
HTML结构

为你需要制作CSS3动画的元素添加data-kui-anim属性。例如:

<p data-kui-anim="fadeIn">Show this with fade-in</p>           
                
动画事件

Scrollanim使用kissui.position来管理和跟踪元素。kissui.position支持下面的一些事件:

  • in:当元素进入视口时触发。
  • out:当元素离开视口时触发。
  • middle:当元素垂直居中时触发。
  • center:当元素水平居中时触发。
  • top:当元素位于页面顶部时触发。
  • bottom:当元素位于页面底部时触发。
  • left:当元素位于页面左侧时触发。
  • right:当元素位于页面右侧时触发。

你可以通过data-kui-anim属性或者kissuiScrollAnim.add(element, event)来为一个元素绑定事件。例如:

kissuiScrollAnim.add(element, {
  'in': 'fadeIn'
});                  
                

或者:

kissuiScrollAnim.add(element, {
  'center middle': 'fadeIn'
});                  
                

或者:

kissuiScrollAnim.add(element, {
  'center middle': 'fadeIn',
  'out': 'fadeOut'
});                 
                
动画效果

Scrollanim中内置了Animate.css来提供各种CSS3动画效果。它支持的动画有:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

kissui.scrollanim页面滚动动画插件的github地址为:https://github.com/usablica/kissui.scrollanim

网友评论