2015/03/05

Animate.cssで簡単にDOM要素のアニメーションを実現する。

DOM要素にfadeとかslideとかのアニメーションをつけるのに、jQueryで書くのはまあ簡単ではあるけど、Animate.cssなるcss3のアニメーションライブラリを知ったので、使い方をメモっておく。シンプルなアニメーションがすごく簡単に実現できる。

Animate.css

githubのREADME.mdには、

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects.
とある、つまり、クロスブラウザに対応したクールで楽しいアニメーションの束、ってことっぽい。実際、cssを取り込むだけで、いろんな種類のアニメーションが簡単に実現できちゃう。

使い方

cssをダウンロードするなり、bower install animate.cssするなりして、HTMLにcssを埋め込む。

<head>
  <link rel="stylesheet" href="path/to/animate.min.css">
</head>

で、アニメーションさせたいDOM要素にclass属性を与えてやる。と。例えば、とあるh2要素に対して、rubberBand(ビヨーーンプルンプルンプン)みたいなアニメーションをつけるには、

<h2 class="animated rubberBand">rubberBand</h2>
のように書く。動的にアニメーションさせたい、例えばボタンクリック時とか、という場合は、
var target = $('h2');
var button = $('button#some-button');
button.on('click', function(ev) {
  target.addClass('animated').addClass('rubberBand');
});
となる。他にも無限にアニメーションさせるとか、アニメーション終了イベントをハンドリングするとかもできる。

アニメーションの種類

  • Attension Seekers
  • Bouncing
  • Fading
  • Flippers
  • Lightspeed
  • Rotating
  • Specials
  • Zoom
8つのカテゴリに分かれていて、それぞれいくつかのアニメーションを提供している。

当然本家のサイトでも試せるんだけど、ドロップダウンでいちいち選択するのが面倒に思って、これらを1つ1つ試すページをここに作ってみたので、よかったらどうぞ。

終わりに

animate.css、簡単に使えて効果でかいっていう感じがいいな、と思った。

0 件のコメント: