今回はホームページにCSSやJavaScriptでアニメーションをつける方法について説明していこうと思います。やっぱりメニュー選択時などにアニメーションがあるのとないのとではそのページの面白さというのが全く違ってきますよね。アニメーションはホームページの内容とは関係しない部分ですが、ホームページを訪れた人が飽きないように楽しめるコンテンツとしてあった方がいいと思います。ですので、より特徴的で印象的なホームページを作るためにアニメーションはぜひマスターしておきたいところです( *｀ω´)

目次

1.ホバーアニメーション
 2.ホバーアニメーション(アンダーライン)
3.固定ヘッダーのサイズ縮小アニメーション
 4.ハンバーガーメニューを使おう
 5.まとめ

1.ホバーアニメーション

以下の例でHeader部分のメニュー部分(Home・About・Topics)にマウスカーソルを合わせて(以下、ホバーすると言う)みてください。スマートフォン・タブレットの方はタッチしてみてください。

See the Pen Hover1 by Charme (@charme0525) on CodePen.

メニュー部分をホバーするとその部分の背景色と文字色が変化しましたね。
クリックできる部分を強調する際にこのホバーアニメーションをよく使います。このアニメーションはCSSのみで実装でき、CSSソースコード内のコメントアウトで示した通り、その箇所のコードにより動作しています。

2.ホバーアニメーション(アンダーライン)

次はサブメニューのアニメーションを追加していきます。今度はホバー時にアンダーラインが表示されるアニメーションです。以下の例のサブメニュー部分を先ほどと同じようにホバーしてみてください。スマホタブレットの方はタッチしてみてください。

See the Pen アンダーラインホバー by Charme (@charme0525) on CodePen.

ホバーするとアンダーラインが左から右に現れ、ホバーを外すと右に消えていったかと思います。このアンダーラインホバーアニメーションでは他にも下から表示される場合や右から左に現れるといったようにさまざまな方向からの表示をすることができます。これもCSSのみで実装できるので、CSSのコメントアウトで示した部分を利用してみてください。

3.固定ヘッダーのサイズ縮小アニメーション

今度はヘッダーを固定表示した際のアニメーションです。ヘッダーを固定表示するとページ内のどの部分でもメニューを選択することができて大変便利なのですが、そのままのサイズで固定されると画面の邪魔になってしまいます。そこでページをスクロールした際にヘッダーの高さが小さくなって固定表示するというアニメーションを紹介します。実際に下の結果をスクロールしてみてください。

See the Pen Untitled by Charme (@charme0525) on CodePen.

このヘッダーサイズを変更するアニメーションではスクロール量を検知する必要があります。そのため、JavaScriptコードが必要となってくるのですが、jQueryを用いて簡単に実装できます。上の例でもjQueryで記述しています。
ヘッダーサイズを縮小する際にヘッダー内の表示方法を変更しないとメニュー部分がヘッダーからはみ出してしまったり不恰好になってしまうので、スクロールされるとサイズ変更とともにflexboxを使ってページタイトルとメニュー部分を配置し直しています。
jQueryのコードを簡単に解説するとvar scrollPosに現在のスクロール量を入れ、その値が100pxより大きくなるとheaderクラスにheader-animationクラスを追加します。スクロール量が100px以下だとheader-animationクラスを削除します。
さらに、header-animationクラス追加時の動作をCSSで記述しています。

4.ハンバーガーメニューを使おう

まずハンバーガーメニューってなに？と思われたかもしれませんが、下の例に見覚えのある３本線のメニューアイコンがあるかと思います。それをクリック・タッチしてみてください。

See the Pen ハンバーガー by Charme (@charme0525) on CodePen.

ハンバーガーメニューを押すとサブメニューが表示されましたね。もう一度押すと、元に戻ります。
これはスマホ・タブレットなどのディスプレイが狭いデバイスでよく見るメニュー表示方法で、必要なときにメニューボタンをタップしてメニューを出すようにすることでメイン部分を広く見せることができます。
モバイル向けのサイトを作る際には必ずと言っていいほど使用されるので、ぜひ覚えておきましょう＿φ(￣ー￣ )

5.まとめ

今回は簡単なアニメーションを実際のホームページに組み込んだ場合の紹介となりました。アニメーションの実装方法はコピペで大丈夫です。数行程度で書けるのでコピペしてるうちに慣れていくと思います。
CSS・JavaScriptのアニメーションについての詳細な説明は別記事にて作成予定ですので、作成次第リンクを貼ります。
最後まで見ていただきありがとうございました。