1ページ目

2ページ目

3ページ目

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/onepage-scroll.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.onepage-scroll.min.js"></script>
<script>
	$(window).load(function(){
		$('#onepageScrollBtn01').on('click', function(){
			$('#onepageScrollDemo02').onepage_scroll({
				sectionContainer: "section",
				responsiveFallback: false,
				loop: true
			});
			$('#onepageScrollDemo01, .onepage-pagination').fadeIn();
			if($('#cboxLoadedContent').size() != 0) {
				$('#onepageScrollDemo01').appendTo($('body'));
			}
		});
		$('.onepageScrollBtn02').on('click', function(){
			$(document).unbind('mousewheel DOMMouseScroll');
			$('body').addClass('disabled-onepage-scroll');
			$('#onepageScrollDemo01').fadeOut();
			$('.onepage-pagination').remove();
			if($('#cboxLoadedContent').size() != 0) {
				$('#onepageScrollDemo01').insertAfter($('#onepageScrollBtn01'));
			}
		});
	});
</script>
<button id="onepageScrollBtn01" class="red">onepageScrollを動かす</button>

<div id="onepageScrollDemo01">
	<div id="onepageScrollDemo02">	    
		<section class="page1">
			<div class="page_container">
				<p>1ページ目</p>
				<button class="onepageScrollBtn02 yellow">onepageScrollを止める</button>
			</div>
		</section>
		
		<section class="page2">
			<div class="page_container">
				<p>2ページ目</p>
				<button class="onepageScrollBtn02 yellow">onepageScrollを止める</button>
			</div>
		</section>
		
		<section class="page3">
			<div class="page_container">
				<p>3ページ目</p>
				<button class="onepageScrollBtn02 yellow">onepageScrollを止める</button>
			</div>
		</section>
	</div>
</div>

onepageScrollについて

onepageScrollは、名前の通り、1ページ単位でのスクロールを実装できるプラグインです。
インパクトのある見せ方ができます。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスGPL v3
対応ブラウザ

関連するjQueryプラグイン

  • List

    List

    スクロールしても見出し部分を固定したまま表示

  • TiltedPage

    TiltedPage

    TiltedPageは、3Dで奥行き感のあるスクロールを表現できる

  • slideToucher

    slideToucher

    上下左右方向へのスワイプ、スライドを実装できる

  • localScroll

    localScroll

    格子状に配置した要素間をダイナミックにスクロールしてくれる

  • OverScroll

    OverScroll

    PCブラウザ上でスマホのスワイプ機能を実現できる