ajaxっぽいスムーズな画面遷移の方法(1/3)
Tips

2017.11.22

ajaxっぽいスムーズな画面遷移の方法(1/3)

WEB制作で通常であれば「パチッ」と遷移する画面を
スタイリッシュなWEBサイトなどで
スムーズに切り替えて連続した体験を提供したいと考えたときに、
まず思い浮かぶのがajaxを利用した遷移の方法です。
ただ、ajaxを利用した画面遷移は同時にしなくてはいけない処理も多く、
導入のハードルが高いのが難点。
ここでは、全3回(予定)でajaxを使わずに、
「ajaxっぽいスムーズな画面遷移」をする方法をご紹介したいと思います。

ajaxをつかった画面遷移は結構大変

うまく使いこなせば素敵なインタラクションのサイトを
作ることができるajaxですが、
通常の画面遷移をajaxで置き換える場合には、
新しく読み込んだコンテンツに対してloadイベントで行われる処理が当たらなかったり、
履歴やheadの中身を更新したりと対策しなければいけないことも多く、
その分工数も増えてしまいます。

ajaxっぽい画面遷移は簡単

ただし、少し工夫することによって、
ajaxで画面遷移を実現するよりも簡単に、
ajaxっぽくスムーズな動きで画面遷移をする
ということができるのでご紹介したいと思います。
例:セナホーム企画様
ここでご紹介するをつかうメリットはなんといっても
ajaxで画面遷移をした後に行わなくてはならない処理
例)タイトルの書き換え、履歴の追加、追加コンテンツにloadイベントで行われる処理を再度実行する、アナリティクス用の処理 など
が不要になるということです。
特にスムーズな画面遷移をさせたいというような場合、
見た目にも機能的にもリッチなWEBということが多いでしょうから、
jsのライブラリなどを使用されていることも多いかと多いかと思います。
その場合、loadのタイミングで一度処理を行なうことを前提に作られた
jsのライブラリであれば、ドキュメントを調べて
任意のタイミング初期化の処理をおこなう方法を調べたり
場合によっては少し中身を改変するということも必要になってきますので、
この方法で遷移させるメリットは大きいと思います。
デメリットというか、コンテンツの一部を引き継ぎたかったり
画面上に表示させたまま次のコンテンツを追加したい、
などの場合はこの方法は使えませんのでおとなしくajaxを使いましょう。

ajaxっぽい遷移の原理

ここで紹介する「ajaxっぽい画面遷移」の方法は
説明するのが恥ずかしいくらい簡単な話なのですが、
遷移前と遷移後に全く同じローディング画面を表示させて、
画面遷移がなかったように見せるというのが種です。
【遷移前】
リンクをクリック → 通常のリンクの挙動をストップ → ローディング画面を表示する → location.href でページ遷移する
【遷移後】
ローディング画面を表示する → 画像の読み込み終了後にローディング画面を非表示にする
詳しい実装方法は第2回以降にご説明しますね!
→ ajaxっぽいスムーズな画面遷移の方法 実践編(前半)

Relative Post

Latest Journal

philosophy | 哲学

philosophy | 哲学

commono
2016.12.19
Vision | 展望

Vision | 展望

commono
2016.12.09
webデザインフロー(1)インサイド→アウト ー理論編ー

webデザインフロー(1)インサイド→アウト ー理論編ー

Shun Uchimura
2017.05.13
オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

Shun Uchimura
2017.05.13
オウンドメディア(2)押さずに、引き込む。

オウンドメディア(2)押さずに、引き込む。

Shun Uchimura
2017.05.13
オウンドメディア(1)受け手主観でオウンドメディアをつくる

オウンドメディア(1)受け手主観でオウンドメディアをつくる

Shun Uchimura
2017.05.13
デザイナーとしてマーケティングを考える(4)4Pのキモを知る

デザイナーとしてマーケティングを考える(4)4Pのキモを知る

Shun Uchimura
2017.05.12
デザイナーとしてマーケティングを考える(3)4Pは古いのか

デザイナーとしてマーケティングを考える(3)4Pは古いのか

Shun Uchimura
2017.05.12
ajaxっぽいスムーズな画面遷移の方法(3/3)

ajaxっぽいスムーズな画面遷移の方法(3/3)

Shinji Yamamoto
2017.12.28
ajaxっぽいスムーズな画面遷移の方法(2/3)

ajaxっぽいスムーズな画面遷移の方法(2/3)

Shinji Yamamoto
2017.11.24
ajaxっぽいスムーズな画面遷移の方法(1/3)

ajaxっぽいスムーズな画面遷移の方法(1/3)

Shinji Yamamoto
2017.11.22
スムーススクロールがうまく動かない場合の解決方法

スムーススクロールがうまく動かない場合の解決方法

Shinji Yamamoto
2017.11.22
Javascript APIでのストリートビュー実装方法

Javascript APIでのストリートビュー実装方法

Shinji Yamamoto
2017.11.15
指定の範囲までついてくるフローティングバナー

指定の範囲までついてくるフローティングバナー

Shinji Yamamoto
2017.07.13

View ALL

Contact