こんにちは、アートディレクターの佐藤です。

Webサイトには、適度な動きがついていると、
より直感的に伝わったり、より目を引いたり、
洗練や楽しさなどのイメージを演出できたりします。

派手な動きを必要としない場合であっても、
例えばメインビジュアルやタグラインに、
フェードインやスライド動作など適度なアニメーションをつけることで、
より伝えたい要素に注目させることもできます。

最近ではそうしたアニメーションも含めてWebデザインと呼べるほど、
アニメーションが欠かせない要素になってきたように感じていますが、
今回は、よく使われる基本的なアニメーションのパターンについて、
見ていきたいと思います。

よく使うアニメーションの基本パターン

フェード

フェードイン、フェードアウトです。

フェード+スライド

フェードにスライド動作を組み合わせます。

例えばフェードに縦方向のスライド動作を組み合わせると、
ふわっと浮き上がるような演出ができます。

スケール（拡大/縮小）

要素を拡大、縮小します。

回転

要素を回転させます。

フリップ+フェード

フリップの動きをつけます。
フェードと組み合わせると、くるっと表裏がひっくり返りながら現れる/消えるような動きになります。

実装方法

jQueryやCSS3のアニメーションで、
CSSのプロパティの値を変化させるのが基本となる考え方です。

CSS側にアニメーションを設定しておき、
jQueryで任意のタイミングでクラス名を付与することで
アニメーションを実行するという方法も使いやすいです。

この場合、
開始時のクラスと終了時のクラスにプロパティの各値と、
アニメーション（時間、イージングなど）を設定し、
jQueryで、いつそのアニメーションを実行するかを設定することになります。

また、TransitというjQueryプラグインを使うと、
より簡単なコードでアニメーションを設定できてとても便利です。

アニメーションを実行するタイミング

アニメーションを実行するタイミングは、
ページ表示時や、ユーザーが何か操作した時などが考えられます。

ディレイを設定することで、時差をつくったり、
スクロール量や現在表示している位置によってアニメーションを開始するといったことも、
よく行われます。

例えば、スクロールに応じて要素をフェードインするいわゆる「Lazy Load」も、
視差効果を与える「パララックス」も、
スクロール量に応じて透明度や位置を変化させているわけです。

まとめ

一見複雑なアニメーションも、前述の基本パターンを、
開始タイミングをずらしたり、ユーザーの操作に応じて開始させたりして作ることができます。

アニメーション演出を考える際は、
このように基本動作に分解すると、発想の助けになったり、
実装方法がつかみやすいです。

Webサイトに効果的なアニメーションを設定することで、
より一層印象的なサイト作りができればと思います。