公開日：2021.06.10
更新日：
WEB制作の中心で「アニメーション開発が得意」と叫びたい ～実装編～
この記事の目次（クリックで項目へジャンプします）
前回のあらすじ
エヴァンゲ〇オン
ネタでこんなこと言ってたら本当にIEのサポート終了が発表されました…！
すべてに決着をつけるため父IEと対峙するEdge。
どうも神田です。
すこし時間が空きましたがアニメーション3パート目になります！
まだ見てないよって方はこちらからGO！
【WEB制作の中心で「アニメーション開発が得意」と叫びたい ～基礎編～】
【WEB制作の中心で「アニメーション開発が得意」と叫びたい ～実用編～】
今回は実装編です。
実装するときのコードや用いる技術などについて説明していきます！
前回紹介したアニメーションのパターンがこちらです。
実装するときのパターン
・ホバーアニメーション
・パララックスアニメーション
・表示切り替えアニメーション
・ループアニメーション
こちらを実装する時の手法などを解説していきたい思います。
パターン毎の実装紹介
ホバーアニメーション
CSSで実装するパターンです。
特に複雑な動きをしていないのでCSSのhoverとtransitionのみで実装可能です。
See the Pen
animation hover css by kaoru kanda (@monomode-kanda)
on CodePen.
アニメーション前と後の2つの状態を意識してスタイルを指定していきましょう。
jsも組み合わせるパターンです。
マウスの位置情報などが必要になってくるアニメーションの場合は基本的にjsを用います。
場合によってはCSSのkeyframesも組み合わせる必要がありますよ！
See the Pen
animation hover js by kaoru kanda (@monomode-kanda)
on CodePen.
（※今回はソース簡略化のためにjQueryで記述しています）
パララックスアニメーション
パララックスアニメーションもかなり種類がありますよね。
すべてのパララックスに共通して言えることスクロール量を取得しているということです。（マウスの位置の場合もありますね）
スクロール量を取得するにはjavascriptを用いて処理する必要があります。
今回は比較的簡単なスクロールで可視範囲に入った要素をフェードインで表示させるアニメーションです。
See the Pen
animation scroll display by kaoru kanda (@monomode-kanda)
on CodePen.
この手のアニメーションは色々なjQueryのライブラリがありますが、こちらでは使っておりません。
Intersection Observer APIを用いて処理しています。
かなりコードが少なく済むのでこちらを使いましょう！（IE対応する場合はpolyfillが必要！）
複雑なアニメーションの場合は今回は割愛しますが、GSAP使うのをおススメします！（https://greensock.com/gsap/）
ScrollMagicが非常に優秀です！
表示切り替えアニメーション
表示切り替えで代表的なものといえばハンバーガーメニューですね。
今回はjQueryを用いて3パターンサンプルを作成しました。
See the Pen
animation toggle menu by kaoru kanda (@monomode-kanda)
on CodePen.
typeAはjQueryのfadeを採用しています。
こちらの良い点はアニメーション後にdisplay:none;に設定してくれることですね。
細かい処理の手間が省けます。
typeBとtypeCはクラスを付与することでアニメーションを実行しています。
そのためjQueryでなくvanilla jsで記述でもOKです。
代わりにアニメーション前と後をCSSで設定しておく必要があります。
メニュー非表示状態の時はクリックできないようにするためにpointer-events:none;を入れるなどするとサクッと実装できると思います。
ループアニメーション
ループアニメーションは一定の動きを繰り返します。
実装時のオススメとしてはCSSのkeyframesです。
「animation-iteration-count」プロパティをinfiniteと指定すると無限にアニメーションしてくれます。
See the Pen
animation loop by kaoru kanda (@monomode-kanda)
on CodePen.
※前回と同じサンプルです
複雑なアニメーションの場合はjavascriptで実装するのでもOKです。
その場合、ブラウザへの負担を考慮し「setInterval」ではなく「requestAnimationFrame」を使いましょう。
次回予告
さーて、次回のモノモさんは～？
モノモです。
ざいたくワークのストレスで、じばんをたくさん掘っています！
さいきんテレビのモグラ特集をノモノとみました。
あなをほりつづけるすがたがかっこよかったです。
あんな風にボクもなりたいなぁ
さて次回は、
WEB制作の中心で「アニメーション開発が得意」と叫びたい ～発展編～
の一本です。
次回もまたみてくださいね～！
ウフフフフフフ♪
