这是一款jQuery文字动画特效插件。该jquery文字动画插件结合animate.css一起使用,可以制作出各种炫酷的文字动画特效。
使用方法
在页面中引入animate.css和rotator.css文件,以及jquery和jquery.rotator.js文件。
<link href="css/animate.css" rel="stylesheet"> <link href="css/rotator.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.rotator.js"></script>
HTML
基本的HTML结果如下:
<div id="example1" class="rotate" data-rotate-interval="3000" data-rotate-animate="zoomIn,zoomOut"> <h1>Welcome to <span class="rotate-arena"></span></h1> <ul> <li>text totate 2</li> <li>text totate 3</li> <li>text totate 4</li> <li>text totate 5</li> </ul> </div>
初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该jquery文字动画插件。
$(".rotate").rotator();
该jquery文字动画插件的github地址为:https://github.com/ht2pl/rotator