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

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 件のコメント:

コメントを投稿