BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

動きをつけてワンランクアップ!ページ遷移アニメーションまとめ【デモ付き】

更新日:2022/12/02


ページ遷移アニメーションとは、ホームページを訪れた時やページを移動した時などの、ページが切り替わるタイミングに付けるアニメーション演出のことです。
移動という単調な動きにスライドやフェードなどのアクセントをつけることで、Webサイトならではのリッチな表現を楽しむことができます。

例えば、以下のようなものを作ることが出来ます。
【デモ】上から下へ背景色が移動する

Webサイトを作成していく中で、「もう少し動きが欲しいな…」と感じることがありませんか?
スクロールしたら要素がふわっと表示されたり、背景に図形がふわふわと舞っているような動きがありますが、デザインによっては実装が難しい場合があります。
例えば、「ニューモーフィズム」で作成されているデザインのWebサイトに動きを付けてしまうとその良さが消えてしまうことがありますよね。

しかし、ページ遷移ならばデザインに左右されることなく、実装することが出来ます。またページ遷移にアニメーションを付けることでWebサイトのクオリティを上げることが出来ます。
本記事では初級・中級・上級編と三段階の難易度に分けてデモをご紹介していきますので、ぜひご覧ください。

【準備】HTML・CSS・jQueryを用意

まず、基本となるHTML・CSS・jQueryを用意します。
今回は、初級・中級・上級と三段階に分けてご紹介するので、違いが分かりやすいように色分けをしています。

HTML

トップページ風に調整します。
.animation-bgはページ遷移に使用する要素です。

ソースの表示

CSS

※必要な部分だけ記載しています。

ソースの表示

@keyframes PageAnime-content の部分でフェードインのアニメーションを作成しています。
初期状態では .content を opacity: 0 にしておき、ページ読み込みが完了して body に .appear というクラス名がついたら、 PageAnime-content を適用させて opacity: 1 にする、という形です。

jQuery

ソースの表示

ページが読み込まれたら($(window).on(‘load’)、body に .appear というクラス名を追加します。
それをトリガーとしてアニメーションが走る形になります。

これで準備完了です。
ここまでで以下のようになります。
「PageAnime-content」のフェードインアニメーションだけが適用されている状態です。
【デモ】ページ遷移アニメーション下準備
次からページ遷移アニメーションを紹介していきます。

【初級編】シンプルなページ遷移アニメーション

まず初めに、シンプルなページ遷移アニメーションからご紹介いたします。

フェードイン・フェードアウト

ふわっと消えたり、出てきたりするページ遷移アニメーションです。

「.fade」をbodyに追加し、「.animation-bg」にアニメーションを設定します。
まず、デモはこちらになります。
【デモ】フェードアウト・イン

キーフレームはこちらです。

100%になるにつれて透明度が0になるように、opacityを指定します。
透明度を下げて非表示にしているだけなのでdisplay: noneを追加しないとクリックなどが効かなくなってしまうので、追加します。

背景色が動く

背景色が動くページ遷移アニメーションはスタンダードな形と言えますね。
本記事では動く方向別に全8種類のデモをご用意しました。

  • 上から下へ・下から上へ

  • 左から右へ・右から左へ

  • 左上から右下へ・右下から左上へ

  • 右上から左下へ・左下から右上へ

HTML

基本的な記述は同じです。
今回は、分かりやすいようにそれぞれにクラスをつけていますが、実際に使うときは、環境にあった書き方で大丈夫です。

ソースの表示