PAGE TOP

公開日:2021.06.10

更新日:

WEB制作の中心で「アニメーション開発が得意」と叫びたい ~実装編~

Tags
animation
frontend
UI

前回のあらすじ

エヴァンゲ〇オン

ネタでこんなこと言ってたら本当に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制作の中心で「アニメーション開発が得意」と叫びたい ~発展編~
の一本です。

次回もまたみてくださいね~!



ウフフフフフフ♪

monomodeリクルートサイト
AD JOURNAL