【OnePageScroll】1ページずつをスクロールして切り替える方法

1ページの中で複数のコンテンツをスクロールしながら入れ替えることができるプラグインを紹介したいと思います。

1ページの中で画面ごとに切り替えて見せたいときに便利だと思います。

OnePageScroll

ダウンロード方法

下記のURLからファイルをダウンロードすることができます。

jQuery One Page Scroll by Pete R. | The Pete Design

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

www.thepetedesign.com

GitHubの画面の右上にある「Code」から「Download ZIP」でファイルをダウンロードします。

必要なファイル

ダウンロード後のファイルから下記のファイルを持ってきます。

jquery.onepage-scroll.min.js
onepage-scroll.css

js

jsは下記のように記述します。

jQuery(function () {
	jQuery(".main-cont").onepage_scroll({
	});
});

上記でも動作しますが細かいオプションもあるので下記のように記述します。

jQuery(function () {
	jQuery(".main-cont").onepage_scroll({
		sectionContainer: "section", // セクションとなる要素（divなどに変更も可）
		easing: "ease", // イージングの指定をする（ease、linear、ease-in、ease-out、ease-in-out"
		animationTime: 1000, // スクロールのアニメーション時間を指定
		pagination: true, // ページネーション表示の有無を指定
		updateURL: false // ページをスクロールしたときにURLを変更するかの有無を指定
	});
});     

html

htmlは下記のように記述します。

<section>～</section>が一つのコンテンツになります。

<div class="main-cont">
	<section class="section01">
		<h2>1コンテンツ目</h2>
	</section>
	<section class="section02">
		<h2>2コンテンツ目</h2>
	</section>
	<section class="section03">
		<h2>3コンテンツ目</h2>
	</section>
</div>

最後に

OnePageScrollは同じページの中でコンテンツをスクロールによって分けて表示させたいときにとても便利なプラグインです。

オプションを指定すればスクロールの挙動や表示の速さなど細かく指定することができます。

サイトにパララックスのような挙動を入れたいときにおすすめしたいプラグインです。