Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで1ページ分(1コンテンツ分)を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。各ブロック内での横スライド機能を追加しました。jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法まずは動作サンプルから。下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面(ページ)を切り替えてみてください。以前話題になっていたiPhone5sのプロダクトページのように1つのコンテンツを1画面内でフルスクリーン表示としてスクロールやボタンクリックで画面全体をスクロールさせて次の画面を表示(遷移)する構成になっています。ブラウザのウィンドウサイズをリサイズしても1コンテンツは1画面内で展開する様になっています。追記】サンプル内では3~5ブロック目に横スライド機能を付けてあります。設置する横スライドブロックの個数は自由に増減でき開始位置の設定も可能になっています。このサンプルファイルの全体構成についてまずはHTMLから。--></section></div><!--/#container-->まず、すべてを囲う大枠ブロック要素を用意し(サンプルでは「#container」)その中に1画面分のベースとなる任意のブロック要素(サンプルでは「.stageBase」)を作成する画面数分、設置します。class="stageBase"></section></div><!--/#container-->サンプルでは各画面を囲うタグを<section>にしていますがここは<div>など別のタグで構成することも可能です。サンプル内3~5ブロック目の横スライド機能については以下の様に「.stageSlide」のクラスで囲ったブロック要素を配置しその中に横スライドさせる画面数分「.slidePanel」のクラスでブロック要素を配置します。-->デフォルトの状態ではページロード時パネル1枚目(一番左)が最初に表示されるようになっていますが任意の番号を最初に表示させるには「.slidePanel」にさらに「.slideInitial」のクラスを追加します。※上記サンプルHTMLソース参照サンプル動作内では、横スライドの開始位置を・3ブロック目は全3スライド中、1つ目のスライド(一番左)・4ブロック目は全3スライド中、2つ目のスライド(真ん中)・5ブロック目は全4スライド中、4つ目のスライド(一番右)といったように開始位置を変えてあります。現在地のスライドパネル(.slidePanel)には、別途クラス「.activeClass」が付くようになっています。これに対してCSSは以下の様になっています。hidden;」は必須となっております。absolute;」にしてこの要素を上下移動させて画面遷移をしている構成になります。横スライドのブロック要素のレイアウト等を指定する部分は「.stageSlide」になりますのでページネーション部分含め、装飾部分をCSSで調整をしてください。実際の動作スクリプトは以下の様になります。((stateUrl.split(setHash)[1])-1);navList.eq(hashSplit).click();});}});</script>スクリプト開始部分にある設定値の内容は以下の様になっています。‘!page’URLの後ろに付けるハッシュ用テキストこれらの設定値を変更することで微調整が可能になっています。サンプル画面で表示している画面下の▼ボタンは「downBtn」の指定を変えてもらうことで、表示/非表示を切り替えることができます。見た目等を変える場合はCSS側で「#pageNav」の部分を調整します。マウスホイールでのスクロールと別にフリック(スワイプ?)動作での制御も入れてありますのでiPhone/iPadなどのスマホ・タブレットでも動作すると思います。追記】キーボードの上下矢印キー操作で画面移動するほかに、左右の矢印キーでも横スライド機能が動作するように追加しました。‘on’」ここを“on”にすることでURLの最後に各画面を個別に判別する為の「#(ハッシュ)」が付与されるようになります。‘!page’」の値で設定することが可能です。※「!」は必須ではないので「#」だけにしたい時は「!」を付けずにテキストのみで記述してください。ここで設定している「#(ハッシュ)」をhasheventを使うことで、ページ内で画面遷移をした後、ブラウザでの「戻る」「進む」ボタンでも画面が行き来(スクロール移動)するようになっています。このページ内でのブラウザの「戻る」「進む」ボタン動作が必要ない場合には「urlHash」の指定を“off”にしてください。固有のURLから特定画面(○番目の画面)を指定する場合はこのハッシュの後ろに表示する画面番号を付けたURLを使って指定することが可能です。※画面表示後、スクロールアニメーションが実行されます。※この動作に関しては「urlHash」の指定を“off”にしていても実行されます。サンプルページの3ページ目を表示【http://black-flag.net/devel/jQueryOnePageScroll/#!page3】スクリプト全体は画面スクロール遷移動作の枠組みのみとなっているのでそれぞれ各画面内のレイアウト等についてはCSSや別途JSなどのスクリプトを使って形成する形になります。スクリプト自体はシンプルではないかもしれませんがHTMLとCSS構成に関してはカスタマイズしやすい形にはなっているかな、、と思っております。jQueryを使って1ページごとにスクロールして画面遷移させるUIを実装する際にぜひ。16:28最近この手のサイトを良く見かけカッコいいなと思っていたので非常に参考になりました。1:56>pecoさんコメントありがとうございます。このスクロールスクリプトがお役に立ったようで嬉しく思っております。ほかにもいろいろと紹介させていただいておりますのであれこれお試しいただけると幸いです。13:25まさにこのようなページを作ろうと探していたところでした!参考にさせて頂きます。0:21>nokoさんコメントありがとうございます。このスクロールスクリプトをご活用いただいている様で嬉しく思っております。カスタマイズ等あれこれお試しいただけると幸いです。2:19>ryu-yaさんコメントありがとうございます。当記事のスクロールスクリプトをご検討いただいているようで嬉しく思っております。特定のスクロール位置でアニメーションを実行させる仕組みについてはもちろん実装可能です。やり方の一つとしては、bodyに「data-page」属性でアクティブなページ番号を付与するようになっておりますのでスクロールアップとスクロールダウンの処理時に「data-page」ナンバーを見て該当番号の時にアニメーションを実行させる、といったイメージになるかと思います。こちらを見ていただくと参考になるかと思っております。