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

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

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

DEMO

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

windows

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

jQueryとwindow.jsを読み込む

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

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.windows.js"></script>

1 2	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/jquery.windows.js"></script>

CSSを読み込む

<link href="css/main.css" rel="stylesheet" type="text/css" />

1	<link href="css/main.css" rel="stylesheet" type="text/css" />

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

.window {
  width: 100%;
  height: 100%;
  position: absolute;
}

.window {

width: 100%;

height: 100%;

position: absolute;

}

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

/*1番目のsection*/
.window:nth-child(1) {
  background: #373e4b;
  top: 0%;
}
/*2番目のsection*/
.window:nth-child(2) {
  background: #5677a6;
  background: url("../images/img1.jpg");
  top: 100%;
}

/*1番目のsection*/

.window:nth-child(1) {

background: #373e4b;

top: 0%;

}

/*2番目のsection*/

.window:nth-child(2) {

background: #5677a6;

background: url("../images/img1.jpg");

top: 100%;

}

HTMLを記述

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

<section id="0" class="window">
	<h2>Section1</h2>
</section>
<section id="1" class="window">
	<h2>Section2</h2>
</section>
<section id="2" class="window">
	<h2>Section3</h2>
</section>
<section id="3" class="window">
	<h2>Section4</h2>
</section>
<section id="4" class="window">
	<h2>Section5</h2>
</section>
<section id="5" class="window">
	<h2>Section6</h2>
</section>

<h2>Section1</h2>

</section>

<h2>Section2</h2>

</section>

<h2>Section3</h2>

</section>

<h2>Section4</h2>

</section>

<h2>Section5</h2>

</section>

<h2>Section6</h2>

</section>

JavaScriptを記述

<script>
	$(document).ready(function(){

	    var $windows = $('.window');

	    $windows.windows({
	        snapping: true,
	        snapSpeed: 500,
	        snapInterval: 1000,
	        onScroll: function(s){},
	        onSnapComplete: function($el){},
	        onWindowEnter: function($el){}
	    });

	});
</script>

$(document).ready(function(){

var $windows = $('.window');

$windows.windows({

snapping: true,

snapSpeed: 500,

snapInterval: 1000,

onScroll: function(s){},

onSnapComplete: function($el){},

onWindowEnter: function($el){}

});

</script>

オプション

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

以上で完了です。

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