
動きをつけて印象的なサイトに!フロントエンドでよく使うアニメーションのパターンまとめてみました
こんにちは、アートディレクターの佐藤です。
Webサイトには、適度な動きがついていると、
より直感的に伝わったり、より目を引いたり、
洗練や楽しさなどのイメージを演出できたりします。
派手な動きを必要としない場合であっても、
例えばメインビジュアルやタグラインに、
フェードインやスライド動作など適度なアニメーションをつけることで、
より伝えたい要素に注目させることもできます。
最近ではそうしたアニメーションも含めてWebデザインと呼べるほど、
アニメーションが欠かせない要素になってきたように感じていますが、
今回は、よく使われる基本的なアニメーションのパターンについて、
見ていきたいと思います。
よく使うアニメーションの基本パターン
フェード
フェードイン、フェードアウトです。
フェード+スライド
フェードにスライド動作を組み合わせます。
例えばフェードに縦方向のスライド動作を組み合わせると、
ふわっと浮き上がるような演出ができます。
スケール(拡大/縮小)
要素を拡大、縮小します。
回転
要素を回転させます。
フリップ+フェード
フリップの動きをつけます。
フェードと組み合わせると、くるっと表裏がひっくり返りながら現れる/消えるような動きになります。
実装方法
jQueryやCSS3のアニメーションで、
CSSのプロパティの値を変化させるのが基本となる考え方です。
CSS側にアニメーションを設定しておき、
jQueryで任意のタイミングでクラス名を付与することで
アニメーションを実行するという方法も使いやすいです。
この場合、
開始時のクラスと終了時のクラスにプロパティの各値と、
アニメーション(時間、イージングなど)を設定し、
jQueryで、いつそのアニメーションを実行するかを設定することになります。
また、TransitというjQueryプラグインを使うと、
より簡単なコードでアニメーションを設定できてとても便利です。
アニメーションを実行するタイミング
アニメーションを実行するタイミングは、
ページ表示時や、ユーザーが何か操作した時などが考えられます。
ディレイを設定することで、時差をつくったり、
スクロール量や現在表示している位置によってアニメーションを開始するといったことも、
よく行われます。
例えば、スクロールに応じて要素をフェードインするいわゆる「Lazy Load」も、
視差効果を与える「パララックス」も、
スクロール量に応じて透明度や位置を変化させているわけです。
まとめ
一見複雑なアニメーションも、前述の基本パターンを、
開始タイミングをずらしたり、ユーザーの操作に応じて開始させたりして作ることができます。
アニメーション演出を考える際は、
このように基本動作に分解すると、発想の助けになったり、
実装方法がつかみやすいです。
Webサイトに効果的なアニメーションを設定することで、
より一層印象的なサイト作りができればと思います。