ITエンジニア/デザイナ向けにオープンソースを毎日紹介

HTML5登場以降、JavaScriptやCSS3を使ったアニメーションが人気になっています。一言でアニメーションと言っても様々で、イラストを使ったものもあれば、単純にテキストやDOMを動かすと言った類のものもあります。

今回紹介するsnabbt.jsは後者のシンプルなアニメーションライブラリになります。クリックやマウスオーバー時などにアニメーションさせるのによさそうです。

snabbt.jsの使い方

サンプルです。クリックでアニメーションします。
サンプルです。クリックでアニメーションします。

もうちょっと高度なアニメーション。こちらはDOM操作です。
もうちょっと高度なアニメーション。こちらはDOM操作です。

snabbt.jsを使えばイラストなどを描くことなく、ユーザ操作に連動したアニメーションが手軽に実現できるようになります。jQueryと連動して使うことも、切り離して使うこともできます。例えば次のような記述になります(jQueryを使わない場合)。

snabbt(element, {
  position: [100, 0, 0],
  rotation: [Math.PI, 0, 0],
  duration: 1000,
  delay: 100,
  easing: 'ease'
});

メソッドチェーンを使うと複数のアニメーションを次々と実行することができます。

snabbt(element, {
  position: [100, 0, 0],
  easing: 'ease'
}).then({
  from_rotation: [0, 0, -2*Math.PI],
  easing: 'spring',
  spring_constant: 0.2,
  spring_deaccelaration: 0.95,
});

アニメーションというと独特なコードが並んでメンテナンスが大変になるイメージがありますが、snabbt.jsは見た目もすっきりしたコードで分かりやすいのではないでしょうか。

snabbt.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

snabbt.js

snabbt.js

daniel-lundin/snabbt.js

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2