動きをつけて印象的なサイトに!フロントエンドでよく使うアニメーションのパターンまとめてみました

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

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

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

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

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

フェード

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

Fadeクリック/タップしてください

フェード+スライド

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

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

Fade+Slideクリック/タップしてください

スケール(拡大/縮小)

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

Scaleクリック/タップしてください

回転

要素を回転させます。

Rotateクリック/タップしてください

フリップ+フェード

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

Flip+Fadeクリック/タップしてください

実装方法

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

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

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

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

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

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

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

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

まとめ

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

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

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


お知らせ:あなたのPCを美術館にする壁紙アプリをリリースしました。

私たちの会社では、PCを起動する度に壁紙をアート作品にするアプリ「daily wallpapers*」をリリースしました。
無料ですので、ご興味のある方は下記バナーの特設サイトからダウンロードしてお楽しみください!