クリック時にアニメーションさせる【jquery+animate.css】

2016年9月7日

とっつぁん

この記事は 3 分くらいで読めると思います

あとで読む

クリックした時に要素にエフェクトをかけたい

【jquery+animate.css】クリック時にアニメーションさせる

自サイトのリニューアル様に実装したエフェクトのメモです。

「ページ上部までスクロールするボタン」と「トップページに遷移するボタン」の画像をキャラクターにしたところ、

先輩に

はたさんなんか動きが欲しいね

と言われたのでちょろっと動かしてみました。

それと同じデモがこれ↓

DEMO

※このブログ右下にも動きを激しくしたのを実装しました

jqueryを読み込む

ご存じjquery、今の時代どのサイトでもだいたい読み込まれてますよね…

<script type="text/javascript" src="jquery.js"></script>

animate.cssをダウンロードして読み込む

animate.cssというcssライブラリがあります。

CSSでアニメーションさせるためのクラスがたっぷり詰まってます。

公式サイトではアニメーションを選んでAnimate it ボタンをクリックするとサンプルを見られます。

まずはこれをダウンロードして読み込みます。

<link rel="stylesheet" type="text/css" href="animate.css" />

これで、要素のクラスに「animated」と「bounce」等のanimate.cssのクラスを追加することでアニメーションさせることができます。

ただし、このままクラス名を追加しただけでは

ページを読み込んだあとアニメーションして終了です。

クリックした時にクラス名を追加してアニメーション終了時にクラス名を削除

jqueryでクリックした時にクラス名が追加されるように指定します。

<script type="text/javascript">
$(function(){
    $("#id名").on({
        "click":function(){
            $(this).addClass("animated アニメーションクラス");
        },
        "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
            $(this).removeClass("animated アニメーションクラス");
        }
    });
});
</script>

クリックした時にクラス名を追加してページ遷移

「クリック」→「ボタンが動く」→「トップページに遷移」

のような感じでトップページに戻るボタンにも動きを付けたいぞと思い、

aタグのリンクでは全然動かなかったのでここもjqueryにしました。

<script type="text/javascript">
$(function(){
    $("id名").on({
        "click":function(){
            $(this).addClass("animated アニメーションクラス");
        },
        "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
            window.location = "遷移先のURL";
        }
    });
});
</script>

なるほど～