0

各セクションの開始位置にトップをしっくり合わせてくれるプラグイン「window.js」

各セクションの開始位置にシックリ合わせてくれるプラグイン「window.js」

表示されるwindowいっぱいにひとつのセクションを表示し、スクロールごとに別のページを閲覧しているような表現をすることが可能な「window.js」をご紹介します。スクロールをすることで切り替わる他、少しズレて静止した状態を修正してくれるアクションが備わっています。使い方は簡単ですので試してみるのも良いかもしれません。

まずは、デモサンプルを確認してみてください。

 

DEMO

 

▼本サイトよりデータ一式ダウンロードします。

windows

 

それでは使い方を見ていきましょう。

 

jQueryとwindow.jsを読み込む

jquery.window.jsは任意の階層に配置します。

 

CSSを読み込む

 .windowに対して横幅100%,高さ100%,ポジション絶対配置にします。

 .windowの:nth-child(擬似クラス)ごとに背景色(背景画像)と順番ごとの%をtopからの距離に指定します。

 

 HTMLを記述

サンプルとして6つのセクションを用意しました。
この際に必ず、1画面をひとつのsectionで囲うようにし、「.window」というクラス名を指定してください。今回はsection2.4.6の背景にCSSで画像を配置しています。

 

JavaScriptを記述

 オプション

 

snapSpeed ズレを修正する際の画面スピードの速度を指定
snapInterval ズレが生じてから実際に修正が始まるまでの時間差

 

 以上で完了です。

基本的な大枠のみのサンプルになりますが、ここからコンテンツなどを配置して使えそうですね。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > 各セクションの開始位置にトップをしっくり合わせてくれるプラグイン「window.js」