[Animate.css] ボタンクリック時にアニメーションを動かす方法

css
HTMLの文字や画像などにアニメーションで動きをつけることのできるライブラリで「Animate.css」というライブラリは比較的有名だと思います。

しかし、ボタンクリックやマウスオーバーで文字や画像を動かそうと思うと一手間必要になります。

今回はそんな一手間について紹介していきます。

[スポンサーリンク]

Animate.cssの紹介

Animate.cssの導入方法や使い方は公式サイトのこちらを見てください。
使い方もバッチリ書いてあります。

ただ英語なのと色々と情報が多いので、今回はボタンクリック時にアニメーションを発動させる方法を紹介していきます。

アニメーションの付け方

クリック時に動かす前にまずは基本的なAnimate.cssの使い方を紹介します。

使い方はとっても簡単です。

こちらのように、アニメーションをつけたい文字や画像にCSSのクラスを追加するだけで動きます。

$('#yourElement').addClass('animated bounceOutLeft');
<p class="animated bounceOutLeft">Bounce</p>

でも上記の方法だと、HTMLファイルを開いた時に1回だけ動いて終わり。という挙動になってしまいます。

それでは、次以降でどうやってボタンクリック時などのイベント発生時に繰り返しアニメーションをつけるのかについて解説していきます。

ボタンクリック時に動かす

公式ページにも書いてある通り、まずはこちらのロジックをコピペで自分のjs内に定義する必要があります。

$.fn.extend({
    animateCss: function (animationName) {
        var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
        this.addClass('animated ' + animationName).one(animationEnd, function() {
            $(this).removeClass('animated ' + animationName);
        });
        return this;
    }
});

ちょっと見慣れない記述だと思いますが、jQueryが必要になります。

まずは、$.fn.extendでjQueryメソッドを追加しています。
どのようなメソッドをかというと、animateCssです。ボタンクリック時にanimateCssを呼べばその瞬間のみアニメーションを付けて、動いたあとは追加したクラスを削除してくれます。

上記の記述は、jQueryの$.fn.extendチェーンメソッドoneの使い方をおさえておけば読み解けるはずです。

上記で追加したメソッドはこのように追加します。
ようはボタンクリック時にのみanimateCssメソッドを呼び出すという流れになります。

$('#btn').on('click',function(){
    $('#animate1').animateCss('bounce');
});

実際に動かしてみたサンプルはこちらです。
ボタンをクリックしてみて下さい。文字が動きます。

See the Pen Animate-css-button by morinkey (@morinkey) on CodePen.

マウスオーバー時に動かす

さて、ボタンクリック以外のイベントでももちろん動かすことは可能です。

例えばマウスオーバーでもボタンクリックと同じようなロジックで実現できます。

まず、$.fn.extendの箇所はボタンクリックと同じ記述が必要です。

呼び出し方はこのようになります。

$('#animate2').on('mouseover',function(){
    $('#animate2').animateCss('bounce');
});

実際に動かしてみたサンプルはこちらです。
文字の上にカーソルとあてると文字が動きます。

See the Pen Animate-css-mouseover by morinkey (@morinkey) on CodePen.

さいごに

Animate.cssはシンプルで軽量なライブラリなので重宝しています。

クリックやマウスオーバーなどのイベントにあわせてピョコンと動けば見栄えのよいサイトになりますよ。

ぜひ使ってみて下さい。

それでは!