CSSとjQueryでサクッとアニメーションを実装する

css3-jquery

CSSを使ってマウスオーバー時にちょっとしたアニメーションを実装しているWebサイトはよく見かけますが、さらにjQueryと組み合わせて使う事で簡単に制御できたり、色々と使い道があるので今回はその例をご紹介しようと思います。

CSSアニメーションの基本的な使い方

まずはCSS単体での簡単なアニメーションを実装したいと思います。下のデモはマウスオーバー時での3大アニメーションです!(間違ってたらごめんなさい)また、CSS3のTransitionはIE9以下で動作しないので注意が必要です。

  • #box1 → アニメーション(背景色)
  • #box2 → アニメーション + スケール
  • #box3 → アニメーション + 回転

See the Pen CSS Animation by WebIsm (@WebIsm) on CodePen.

jQueryでCSSアニメーションを制御する

ここからはjQueryを使っていきます。jQueryを <head> 内などに読み込みます。あとはCSSでアニメーションを設定しておき、jQuery側で操作していきます。

<head>
	・・・
	<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
</head>

クリックで背景色をアニメーションさせる

クリックで背景色が変わるアニメーションを実装したいと思います。jQueryのtoggleClass(class)を使います。アニメーションさせたい要素 #box にTransitionを設定し、消したり付けたりするclass .on にアニメーション後の値を指定すると、クリックするたびアニメーションで変化します。toggleClass(class)はCSSでのアニメーションに限らず、かなり活躍してくれますので使ってる人も多いんじゃないでしょうか。他にもaddClass(class)removeClass(class)などで応用できると思います。

See the Pen CSS Animation Toggle Class by WebIsm (@WebIsm) on CodePen.

ドロップダウンメニューを作ってみる

先ほどの応用でドロップダウンメニューを作ってみました! .open というclassを用意し、それを付けたり消したりしています。ポイントとしては max-height を指定し、最大の高さを変えている所です。

See the Pen CSS Animation Dropdown menu by WebIsm (@WebIsm) on CodePen.


こんな感じでjQueryとCSSを組み合わせて使うと色々と便利です。他にも素敵な組み合わせなどアドバイス等ありましたら、ぜひ教えて下さい!

シェア

コメント