kissui.scrollanim页面滚动动画库插件

简介

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

原文地址:https://www.cnblogs.com/lalalagq/p/9973510.html

时间: 2024-09-27 15:39:44

kissui.scrollanim页面滚动动画库插件的相关文章

Html5添加轻量级炫酷js粒子动画库插件教程

一.使用方法 该粒子动画库插件使用方法非常简单,首先要在页面中引入particles.js文件. <script src="js/particles.js"></script> 在页面中使用一个div来作为放置粒子的容器. <div id="particles-js"></div> 然后可以按下面的方法调用该粒子插件: particlesJS('particles-js', { particles: { color:

ScrollMagic-jQuery元素滚动动画库

ScrollMagic是一款制作各种HTML元素滚动动画效果的js库插件.正如其名字一样,该jquery元素滚动动画库出插件可以制作出各种神奇的滚动动画效果.它甚至可以制作网页视觉差效果和瀑布流效果. ScrollMagic动画库的强大之处在于: 基于滚动位置执行动画-无论是触发一个动画或同步到滚动条的滚动. 可以在指定的滚动位置开始一个元素的动画-无论是无限或有限的循环次数. 基于滚动位置切换元素的CLASS样式. 可以轻松的添加网页视觉差效果. 可以创建无限滚动的瀑布流效果(通过AJAX调用

html5轻量级炫酷js粒子动画库插件

这是一款基于html5 canvas的轻量级炫酷js粒子动画库插件.该粒子动画库js插件可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常酷. 同样的例子效果还有:HTML5 Canvas彩色的光粒子模拟粒子运动动画效果. 在线演示:http://www.htmleaf.com/Demo/201501301300.html 下载地址:http://www.htmleaf.com/html5/html5-canvas/201501301299.html

scrollreveal(页面滚动显示动画插件支持手机)

scrollreveal.js是一款可以轻易实现桌面和移动浏览器元素随页面滚动产生动画的js插件.该插件通过配置可以在页面滚动,元素进入视口时产生炫酷的动画效果,同时还支持元素的3D效果,非常的实用. 安装 可以通过npm或bower来安装scrollreveal.js插件. 1 2 npm install scrollreveal bower install scrollreveal                基本使用方法 HTML结构: 1 2 3 <!-- HTML --> <

模拟真实物体运动的js动画库插件-Anima

Anima是一款可以同时控制许多对象进行动画的js插件.并且每一个对象都有它们各自的质量和密度以模拟现实生活中的物体. CSS3动画有一些限制,最主要的是你不可以真正完全的控制它们.如果不使用一些技巧的话,你几乎不可能停止动画的过渡. Anima是一个基本的物理基础js动画库框架.你可以通过它很容易的创建现实生活中的物体运动动画.Anima经过压缩后只有5K大小. 在线演示:http://www.htmleaf.com/Demo/201502041327.html 下载地址:http://www

snabbt.js 强大的jQuery动画库插件

snabbt.js是一款轻量级的.功能强大的.简单易用的jQuery插件.snabbt.js提供了丰富的函数和接口来组合各种动画效果,它的过渡动画效果可以和CSS transform媲美,是一个非常强大的js动画库.snabbt.js的每秒传输帧数(刷新率)达到60FPS,即使是移动设备上也能达到这个数值.它的大小只有4KB,非常轻便. 使用snabbt.js可以很容易的将元素移动.旋转.放大缩小.倾斜和改变元素的大小.通过使用矩阵乘法运算(matrix multiplication opera

WebGL助手:TWGL简化WebGL API的js动画库插件

twgl.js是一个小巧的WebGL助手库.这个js库的目的是让WebGL API更加简洁易读.WebGL的API非常的冗长,设置着色器,缓冲器,属性和uniforms需要大量的代码.一个简单的发光立方体效果在WebGL中可能需要超过60次代码调用.使用TWGL可以大大减少代码的书写,而且书写的代码整洁明了,非常容易读懂. TWGL有5个核心函数: twgl.createProgramInfo:编译着色器和创建属性和uniforms的设置器. twgl.createBufferInfoFromA

aos.js超赞页面滚动元素动画jQuery动画库

插件描述:aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 简要教程 aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. AOS.js 下载          案例演示 安装 可以通过bower来安装aos动画库插件.

tween.js可生成平滑动画效果的js动画库

tween.js是一款可生成平滑动画效果的js动画库.tween.js允许你以平滑的方式修改元素的属性值.它可以通过设置生成各种类似CSS3动画效果.相关的jquery插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween.js允许你以平滑的方式修改元素的属性值.你只需要告诉tween你想修改什么值,以及动画结束时它的最终值是什么,动画花费多少时间等信息,tween引擎就可以计算从开始动画点到结束动画点之间值,来产生平滑的动画效