基于animate和fullpage制作动画demo的总结
2016-10-28 本文已影响0人
风林山
animate.css就是一个动画库，使用时注意点：
-
用法：
<head> <link rel="stylesheet" href="animate.min.css"> </head> <h1 class="animated bounceOut">Animate.css</h1> -
当与jQuery结合起来，你可以自己决定何时启用这些动画，通过jQuery动态添加使用动画：
$('#yourElement').addClass('animated bounceOutLeft'); -
可以检测动画结束事件：
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething); -
：jQuery.one（） 最多执行事件处理一次。
-
您可以更改动画的持续时间，增加延迟或改变显示次数：
#yourElement { -vendor-animation-duration: 3s; -vendor-animation-delay: 2s; -vendor-animation-iteration-count: infinite; }
*注意：一定要在CSS适当的前缀(webkit, moz等)代替“vendor”
fullpage的afterLoad方法中注意点：
- anchorLink和index分别是锚链接名称（section）和 序号（对应锚链接）。
- 利用if语句判断页面锚链接的序号。
- 使用addClass改变标签属性，将标签属性改为所需要的动画（注：每一页（section）的动画必须写在相对应的if语句中）。
- 需要有动画的标签除了第一页（section），都需要设置隐藏属性display:none;否则所有的section会同时执行动画，导致其他页面动画提前执行。
- 在相对应的if中使用show方法使其显示。
相关链接：
jQuery全屏滚动插件FullPage.js中文帮助文档API:http://www.uedsc.com/fullpage.html
动画demo以及资料访问地址：vss上面 \99.Study\demo and package.rar
