思わず見惚れるページ遷移アニメーション事例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

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

33,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 33,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ