第14回 スクロール位置がボックス境界にスナップするページ
今回はシングルページサイトの構築で、1つの情報になるのかが分かりにくい場合などにマウスホイールに応じて、ページの先頭部分に自動的にフィットするサンプルを作成します。
解説:(有)ムーニーワークス ハヤシユタカ
最近のWebサイト構造のひとつに、従来は「会社概要」「お知らせ」といった系統のことなるコンテンツを別ページとして用意しておいた構造から、それらをすべて同じページに配置してみせるシングル(単一)ページという構造もよく見られるようになりました。
シングルページは、ページ遷移の面倒さや待ち時間にストレスからくるユーザーのサイト離脱を防ぐことができ、また最近のスマートフォンでのサイト閲覧においても、片手でスムースにスピーディーに情報を得ることができるので、とくに新商品、新サービスのキャンペーン系の特設サイトやランディングページに適した構造と言えるでしょう。
しかし、こういったシングルページサイトの構造は、どこからどこまでは1つの情報になるのかが分かりにくい場合があります。もちろん、デザインでそれを分かりやすく伝えることは大切でありますが、伝え手側がうまくユーザーを誘導するようにすることも1つの方法です。今回はシングルページ内のそれぞれのコンテンツの適正な位置に、自動的にユーザーを誘導する仕組みを実装してみます。
■今回作成したサンプル
|
●表示領域の位置補正を行うwindowsプラグインについて
ユーザーがサイトを閲覧しているときに、自動的にスクロール位置を適正な位置に補正するとき、あたかも何かに吸い付くような動きをすることから「スナップ」するとも表現され、今回サンプルに使用した「windowsプラグイン」はそういった用途に利用できるjQueryプラグインで、スナップスピードやタイミングを制御できるオプションなども用意されています。
windowsプラグインは、スナップ先としたいコンテンツ(※以下、スナップコンテンツ)を内包する要素からwindows()メソッドを実行することで実行され、以後スナップコンテンツとユーザのスクロール位置は常に監視されます。
例えば、ユーザーがページ下方向にスクロールダウンすると、それに応じてページ内に配置されたすべてのHTML要素は上方向に流れて行き、その中でスナップコンテンツも上方向に流れます。そして、スクロールダウンを止めると、スナップコンテンツの縦位置がブラウザ画面表示領域(※以下、スクリーン)上端よりも少し上にはみ出ます。そして、通常ならば、ユーザーが少し上方向にスクロールをして、要素を下方向に移動するように位置を調整しながらコンテンツを読み進めていくことになりますが、windowsプラグインの機能が実行されると、スナップコンテンツに指定した要素が自動的にスクリーンの上端の位置にくるように、スクロール位置を調整してくれます。
しかし、前述のように多少の上方に行き過ぎた程度の位置のズレであれば、スナップコンテンツの始まりの位置をスクリーン上端に移動するよう補正してくれますが、そのスナップコンテンツの縦幅の半分以上の距離分上方に行き過ぎた場合は、そのスナップコンテンツへの補正は行われず、次のスナップコンテンツがスクリーン上端まで上方に移動します。
逆方向も同様で、スクリーンを上方にスクロールアップすると、要素はすべて下方向に流れて行くため、スナップコンテンツの縦幅半分以上がスクリーン上端よりも下に移動していれば、さらに上方にスクロールアップされ、前のスナップコンテンツの始まりの位置まで移動されます。
文章だけだとわかりにくいため、図を参照してください。
●windowsプラグインで位置補正機能を実装する
サンプル(sample_basic.html)は、各コンテンツの位置が自動補正されていることが分かりやすいようにページの背景色を色分けし、連番の番号をページの中心に設置しています。
また各コンテンツの縦幅は常にスクリーンサイズ(ブラウザ表示領域)の縦幅と一緒になるように、Javascriptで補正しています。このような仕様にすることで、常にスクリーンの縦半分より上か下かで、スナップする方向が変わるので動作がわかりやすくなります。
■■■■ HTMLコード
<div id="contentContainer"> <div id="columnContainer"> <div id="column1" class="column"> <p class="number">1</p> </div> <div id="column2" class="column"> <p class="number">2</p> </div> <div id="column3" class="column"> <p class="number">3</p> </div> <div id="column4" class="column"> <p class="number">4</p> </div> <div id="column5" class="column"> <p class="number">5</p> </div> <div id="column6" class="column"> <p class="number">6</p> </div> </div> <!--/ columnContainer --> </div> <!--/ contentContainer -->
■■■■ JSコード
;(function (d, $) { var jQdm_adjustContent; jQdm_adjustContent = function(){ // 初期設定 var prop = { $window: $(window), snapTarget: '.column', snapSpeed: 500, snapInterval: 500 } function init(){ // スナップ(位置補正)させる要素をキャッシュ var _$t = $(prop.snapTarget), _$w = prop.$window; // ページロード時とリサイズ時に、スナップ要素のサイズをウィンドウサイズに合わせるように設定 _$w.on('load', function(){ fitWindowScale(_$t); }); _$w.on('resize', function(){ setTimeout( function() { fitWindowScale(_$t); }, 200); }); // スナップ対象要素にスナップ機能を付与する _$t.windows({ snapping: true, snapSpeed: prop.snapSpeed, snapInterval: prop.snapInterval }); } // 要素をウィンドウワイズにあわせる function fitWindowScale(_$t){ var _w = window.innerWidth, _h = window.innerHeight, _$num = _$t.find('.number'); _$t.css({ height: _h }); _$num.css({ top: _h / 2 - _$num.height() / 2 - 20, left: _w / 2 - _$num.width() / 2 }); } // 文字列置換処理 function replaceString(_str, _bf, _af, _flg){ var _reg = new RegExp(_bf || '[.#]', _flg || ''); return _str ? _str.replace(_reg, _af || '') : false; } init(); }; jQdm_adjustContent(); })(document, jQuery);
上記で紹介したサンプルの他に書籍の方ではナビゲーションを追加したパターンやコンテンツの写真を追加し、フェードで出現するパターンなども作成しております。
●ナビゲーションを追加した例
url. http://www.html5-memo.com/sample/jq-books/15/sample_plus_nav.html
●コンテンツに写真を追加した例
url. http://www.html5-memo.com/sample/jq-books/15/sample_photo.html
これで以上になります。
今回はスクロール位置がボックス境界にスナップでしたが、次回は、マイスホ イールに応じて1画面毎にページを遷移するパララックスを作成します。
『現場でかならず使われている jQueryデザインのメソッド』
今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。 |
作成したサンプルや本の紹介はこちらをご覧ください。
2015/3/4
●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」
Profile
【ハヤシユタカ】2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より教鞭をとる。2004年からは、デジタルハリウッド大学大学院、明治大学大学院非常勤講師を歴任。2012年からはデジハリオンラインスクールにてWEB関連講座のeラーニング教材の開発に携わり、会社・自宅のPCからいつでも「HTML5」「WordPress」を学べる講座を担当。2013年御苗場Vol12.横浜にて「The Zoological Garden ~言葉のない対話~」エプソン賞受賞。
こちらの連載もあわせてご覧ください
●WordPressでブログでなくビジネスサイトをつくろう:http://www.mdn.co.jp/di/articles/2782/
●ゼロからはじめるHTML5でのサイト制作:http://www.mdn.co.jp/di/articles/2605/
●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/
【著書・共著】
●現場でかならず使われている jQueryデザインのメソッド (2014/4/25)
●HTML5デザイン 仕事のネタ帳 CSS3+JavaScript+CSSフレームワークと活用するプロのテクニック (2014/3/24)
●現場で役立つCSS3デザインパーツライブラリ (2013/5/17)
●WordPress 3.x 現場のワークフローで覚えるビジ?ネスサイト制作 (2012/9/20)
●WebデザイナーのためのHTML5入門 (2012/08)
●ポケット詳解 jQuery Mobile辞典 (2012/05)
●すべての人に知っておいてほしい HTML5 & CSS3 の基本原則(2012/10/20)
●すべての人に知っておいてほしい スタイルシートデザインの基本原則(2012/5/25)