More Related Content
Similar to Bootstrapにちょい足しアニメーション@春のJavascript祭り (20)
More from Masayuki Abe (13)
Bootstrapにちょい足しアニメーション@春のJavascript祭り
- 2. ● ACE01 / SmartRelease プロダクトマネージャー
● CPI エバンジェリスト 統括
● KDDIウェブ 公認 CPI スタッフブログ 編集長
● Drupal(g.d.o Japan)日本コミュニティー
● テックアカデミー 講師
● HTML5 Fun 理事
OSSを広げる活動、Web制作に関する情報発信を行う
神戸生まれ、横浜育ち、7月31日生まれ
阿部 正幸(あべ まさゆき)
ディレクタープログラマー プロマネ Evangelist
- 33. .hover + Animate.css
animationHover('#img','animated fadeIn');
animationHover('#img2','animated bounceIn');
function animationHover(element, animation){
element = $(element);
element.hover(
function() {
element.addClass('animated ' + animation);
},
function(){
//wait for animation to finish before removing classes
window.setTimeout( function(){
element.removeClass('animated ' + animation);
}, 2000);
}
);
};
- 35. var waypoint = new Waypoint({
element: document.getElementById('wp1'),
handler: function() {
console.log( wp1ポイントに来ました ');
}
})
Waypoint
② <hoge id= wp1 >を監視し、wp1までスク
ロールしたら、function(){ }が実行される
- 36. Waypoints + Animate.css①
var waypoint = new Waypoint({
element: document.getElementById('wp1'),
handler: function() {
this.element.className = 'animated shake ;
}
})
③ wp1までスクロールしたら、wp1のクラス名
を「animated shake」に変更し、
アニメーションを付与
- 37. Waypoints + Animate.css②
<div id="section3" class="scrollhidden">
<!‒ contents here à
</div>
.scrollhidden{ visibility:hidden; }
html
css
var waypoint = new Waypoint({
element: document.getElementById('section3'),
handler: function() {
this.element.className = 'animated slideInLeft';
},offset:400,
});
javascript