簡単にアニメーションを実装したかったので、animate.cssを使用して某サイトを作成しました。
復習がてらに掲載。
animate.min.cssをHTMLに読み込む
こちらからanimate.min.cssをダウンロードし読み込む
単純にheadの記述に下記のCSSを記載すればOK!
<head> <link rel="stylesheet" href="animate.min.css"> </head>
要素にクラスをつける
あとは要素にクラスをつけていけばOK!
<div id="move" class="animated bounce">bounce</div> <div id="move" class="animated flash">bounce</div> <div id="move" class="animated pulse">bounce</div>
実行結果
実行結果は下記のソースを確認してください。
ループ処理は行っていないので止まっていたら右下のreturnボタンをクリック
See the Pen xZOemZ by Atsushi (@office606) on CodePen.
クラスの一覧
クラスの一覧はこちらから確認できるので参照してください。
https://github.com/daneden/animate.css
http://daneden.github.io/animate.css/
JavaScriptでの実行
これはmoveをクリックすればpulseするサンプルです。
"animationend"が実行されればremoveClass()でクラスが外れます。
$(function(){
$("#move").on({
"click":function(){
$(this).addClass("animated pulse");
},
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
$(this).removeClass("animated pulse");
}
});
});
意外と簡単にアニメーションするページを作成することができます。
また上記に記載したJavaScriptを使用することでスクロール位置によって実行されるページの作成も可能です。
2016.1.19追記
infiniteクラスをつけておくとアニメーションがループします。
<div id="test" class="animated flash infinite">flash</div>
スポンサーリンク
Originally posted 2015-12-23 17:01:01.