ちょっとしたアニメーション効果で印象をぐっと良くするためのjQueryプラグイン「animo.js」

要素に少しの動きをつけるだけで人に与える印象を大きく変えることが可能です。
jQueryプラグインのanimo.jsを利用することで手軽に利用できるようになります。
ちょっとしたアニメーション効果で印象をぐっと良くするためのjQueryプラグイン「animo.js」サンプル

使用方法 animo.jsからファイル一式をダウンロードします。
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="animo.js"></script>
<link href="animate-animo.min.css" rel="stylesheet" type="text/css">
<script>
$(function(){
$('.class名').animo( {
animation: 'bounceInLeft',
duration: 1
}
});
</script>

上記を記述したら動かしたい要素を記述します。
<p class="class名">動くよ</p>
また複数の要素を連続で動かす場合は以下のよう間にします。
$('.class名').animo( {
animation: 'bounceInLeft',
duration: 1
},
function() {
$('.class名2').animo( {
animation: 'bounceInLeft',
duration: 2
} );
});

その他にもAnimate.cssを使ったエフェクトなどが利用できますのでanimo.jsのサンプルを見ながら色々な動きを試して下さい。

ちょっとしたアニメーション効果で印象をぐっと良くするためのjQueryプラグイン「animo.js」サンプル

sponsors

「ちょっとしたアニメーション効果で印象をぐっと良くするためのjQueryプラグイン「animo.js」」をシェアする

記事作成:
記事URL:

TOP > > > ちょっとしたアニメーション効果で印象をぐっと良くするためのjQueryプラグイン「animo.js」