实用的纯JS和CSS3页面滚动动画库插件 -CSS代码 -演示与下载 -时代Java

实用的纯JS和CSS3页面滚动动画库插件 A CSS3 scroll animation library

Easy to use

Scrollanim has many builtin CSS3 animations to use. All you need to do is to add data-kui-anim attribute to your elements.

 
			            <div data-kui-anim="fadeIn">
			  Show this with a fadeIn animation.
			</div>
			        

Cool, isn't it?

Advanced mode

Also, this is possible to add the animations using the JavaScript API.

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

Scrolanim supports all available positions for an element on the page. Also, you can use a compound event name (e.g. in center middle)

CSS3 Animations

Scrolanim has many CSS3 animations to use. No JavaScript animations, better performance.

Works on desktop and portable devices perfectly.

Infinite animation

Also, animations names accept an optional parameter infinite to repeat the animation forever.

Perfect event control

Scrollanim controls all elements with an extra care. You can attach events to almost all possible positions of an element on the page.

For instance, this element appears with a fadeIn animation but also gets a pulse animations when it's in the middle of the page.

下载代码说明
X关闭

纯JS和CSS3实现页面滚动动画库特效源码

kissui.scrollanim是一个实用的纯JS和CSS3页面滚动动画库的插件。通过该插件可以使元素进入浏览器视口的时候,展示指定的CSS3动画效果。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗,不支持IE8及以下浏览器。有兴趣的朋友们可以来下载试试吧。本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。希望大家可以喜欢!