簡単!軽量!爽快!要素に動きを付けられるJSアニメーションライブラリ「snabbt.js」

最近のサイトでは様々な要素に動きが付けられているものが多くなっています。
今回紹介するアニメーションのJavaScriptライブラリsnabbt.jsを利用すると、簡単に導入ができます。
簡単!軽量!爽快!要素に動きを付けられるJSアニメーションライブラリ「snabbt.js」

使用方法
snabbt.jsからファイルをダウンロード。
あるdiv要素をクリックした際に当該要素にアニメーションを付けるとします。
<div id="id名">クリック</div>
上記のようなdivを想定した場合は下記のようにJSを記述します。
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="snabbt.js"></script>
<script>
$(function() {
$("#id名").on('click', function() {
$(this).snabbt({
position: [200, 0, 0], //位置
loop: 10, //アニメーション実行回数
easing: function(value) { //動きの設定
return Math.sin(Math.PI * value);
}
});
});
});
</script>


また、アニメーションはthenで、チェーンしてつなげることも可能です。 $("#id名").on('click', function() {
$(this).snabbt({
position: [100, 0, 0],
rotation: [0, 0, 2*Math.PI],
easing: 'spring',
springConstant: 0.3,
springDeacceleration: 0.8,
}).then({
fromRotation: [0, 0, 0],
easing: 'spring',
springConstant: 0.3,
springDeceleration: 0.8,
});
});

実際の動きはサンプルページをご覧ください。
簡単!軽量!爽快!要素に動きを付けられるJSアニメーションライブラリ「snabbt.js」サンプル

sponsors

「簡単!軽量!爽快!要素に動きを付けられるJSアニメーションライブラリ「snabbt.js」」をシェアする

記事作成:
記事URL:

TOP > > > 簡単!軽量!爽快!要素に動きを付けられるJSアニメーションライブラリ「snabbt.js」