思わず見惚れるページ遷移アニメーション事例10選【CSS/JavaScript】

複数のページで構成されたWebサイトを閲覧していると、ページを行ったりきたりする動作が発生します。

ページ間の移動という単調な動作にアクセントをつけて、読者の注目度を上げてくれるのが、ページ遷移アニメーションです。

本記事では、パフォーマンスへの影響を最小限におさえながら、ユーザーをひきつけられる、おすすめのページ遷移アニメーションをご紹介します。

1. Vue.jsを使った6種類のページ遷移アニメーション

Vue.jsを使った、高速で洗練されたページ遷移のセット。

フェードやズームといった基本的なページ遷移と、すこし個性的なページ遷移をあわせて6種類制作しています。

See the Pen
Vue2 page transitions with GSAP by Tim Rijkse (@timrijkse)
on CodePen.0

2. ブラウン管テレビ風のページ遷移アニメーション

ブラウン管テレビの電源を切ったときのようなアニメーションで、画面をゆっくり切り替えるページ遷移です。

新しいページに移る際には、一本線から画面全体が展開されます。

See the Pen
Page Transitions by Mergim Ujkani (@MergimUjkani)
on CodePen.0

3. ドラマチックに展開するSVGのページ遷移アニメーション

ごく一般的なデザインのローディングアニメーションかと思いきや、円が広がりながら画面いっぱいに展開します。

ドラマチックなデザインは、とくにマルチメディアサイトにおすすめです。

See the Pen
Page Transition Loader by Arsen Zbidniakov (@ARS)
on CodePen.0

4. カラフルでスピーディーなページ遷移アニメーション

ページ遷移を複数箇所で使うなら、スピードも重要です。

カラフルなプリローダーを使ったこのスニペットは、スピードとデザインを両立しています。

See the Pen
Page Transition with Loader by John Heiner (@johnheiner)
on CodePen.0

5. ユニークなデザインのサムネイル画像展開アニメーション

CSSとAngular.jsを組み合わせたスニペット。

サムネイル画像をクリックすると、その画像を背景にしたモーダル表示に切り替わります。

See the Pen
Thumbnail to fullscreen page transition by Steve Gardner (@ste-vg)
on CodePen.0

6. ワイパーのようなページ遷移アニメーション

CSSとjQueryを使って、ワイパーのようなアニメーションを実装しています。

テレビや映画の場面転換のようなデザインです。

See the Pen
Page transition CSS3 by TOMAZKI (@Podgro)
on CodePen.0

7. GSAPを使ったキュービックなページ遷移アニメーション

超高速のアニメーションライブラリ「GSAP」を使用したページ遷移。

スライドアップのアニメーションに、背景でアクセントをつけています。

See the Pen
GSAP Cubic bezier page transition by Maciej Siwanowicz (@Polenji86)
on CodePen.0

8. Lottieを使った液体のようなページ遷移アニメーション

ポップでどことなくレトロな色合いと、液体のような有機的なデザインが目をひきます。アニメーションも高速です。

Lottieを使って、Adobe After Effectsのページ遷移をWeb上で実装しています。

See the Pen
Responsive bodymovin modal / page transition by Jonas Sandstedt (@sandstedt)
on CodePen.0

9. SF映画風のグリッチを効かせたページ遷移アニメーション

SF番組や映画などでおなじみの、グリッチを効かせたディストピア風なエフェクトをページ遷移に使っています。

See the Pen
Canvas Glitch Intro by nclud team (@nclud)
on CodePen.0

10. 回転する3Dの立方体によるページ遷移アニメーション

Webサイトを立方体に見立てて回転させる、ユニークなデザインのページ遷移です。

jQueryとVelocity.jsが使われています。

See the Pen
3D Cube Page Transition by Hubert Warzycha (@Hiteh)
on CodePen.0

おわりに

ページ遷移といえばフェードやスライドが一般的ですが、アイデア次第でさまざまなアイデアを組み込むことができます。

今回ご紹介した例にもあったように、CSSとJavaScriptライブラリを適切に組み合わせれば、速度とデザインの両立も可能です。

やりすぎには注意しつつ、すこし冒険したデザインにもチャレンジしてみましょう。

（執筆：Eric Karkovack　翻訳：Nakajima Asuka　編集：少年B　提供元：speckyboy）