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

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

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

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

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

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

先輩に

はたさん

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

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

それと同じデモがこれ↓

DEMO

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

jqueryを読み込む

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

なるほど~

 

 

ちなみにanimate.cssはwow.jsと組み合わせてスクロールアニメーションさせるヤーツが一時期流行りました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です