animate.css就是一個動畫庫空盼,使用時注意點:
用法:
<head> <link rel="stylesheet" href="animate.min.css"> </head> <h1 class="animated bounceOut">Animate.css</h1>
當與jQuery結合起來肢扯,你可以自己決定何時啟用這些動畫,通過jQuery動態(tài)添加使用動畫:
$('#yourElement').addClass('animated bounceOutLeft');
可以檢測動畫結束事件:
$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);
:jQuery.one() 最多執(zhí)行事件處理一次。
您可以更改動畫的持續(xù)時間雪营,增加延遲或改變顯示次數:
#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會同時執(zhí)行動畫谴餐,導致其他頁面動畫提前執(zhí)行。
- 在相對應的if中使用show方法使其顯示呆抑。
相關鏈接:
jQuery全屏滾動插件FullPage.js中文幫助文檔API:http://www.uedsc.com/fullpage.html
動畫demo以及資料訪問地址:vss上面 \99.Study\demo and package.rar