• あんだこにゃ?

  • やんのかこにゃ?

  • ケンカはやめるにゃ

  • にゃん

  • にゃにゃん

  • はっ!

  • 背後にたつにゃ

  • 木陰からじっとにゃ

  • はっ!

  • 次のmacOSXだにゃ

  • にゃにゃにゃ!

  • 消しゴムの角はつかわせてもらったにゃ

  • ウツにゃ

  • レジ担当にゃ

  • はっ!

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

  • files
  • js
  • html
<link href="<PATH/>style.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.scrollTo.min.js"></script>
<script src="<PATH>/jquery.localScroll.min.js"></script>
<script>
	$(window).load(function(){
		$.localScroll({
			target: '#localScrollContent', // could be a selector or a jQuery object too.
			queue:true,
			duration:1000,
			hash:false
		});
	});
</script>
<div id="localScrollDemo">
	<ul id="localScrollNavigation">
		<li class="sup">
			<ul>
				<li><a href="#section1">あんだこにゃ?</a></li>
				<li><a href="#section1b">やんのかこにゃ?</a></li>
				<li><a href="#section1c">ケンカはやめるにゃ</a></li>
				<li><a href="#section2">にゃん</a></li>
				<li><a href="#section2b">にゃにゃん</a></li>
				<li><a href="#section2c">はっ!</a></li>
				<li><a href="#section3">背後にたつにゃ</a></li>
				<li><a href="#section3b">木陰からじっとにゃ</a></li>
				<li><a href="#section3c">はっ!</a></li>
				<li><a href="#section4">次のmacOSXだにゃ</a></li>
				<li><a href="#section4b">にゃにゃにゃ!</a></li>
				<li><a href="#section4c">消しゴムの角はつかわせてもらったにゃ</a></li>
				<li><a href="#section5">ウツにゃ</a></li>
				<li><a href="#section5b">レジ担当にゃ</a></li>
				<li><a href="#section5c">はっ!</a></li>
			</ul>					
		</li>
	</ul>
	<div id="localScrollContent">
		<div class="localScrollSection">
			<ul>
				<li class="sub" id="section1">
					<p class="title">あんだこにゃ?</p>
					<p class="photo"><img src="<PATH>/imgb13.jpg" width="450" alt=""></p>
					<a href="#section1b" class="next">>></a>
				</li>
				<li class="sub" id="section1b">
					<p class="title">やんのかこにゃ?</p>
					<p class="photo"><img src="<PATH>/imgb14.jpg" width="450" alt=""></p>
					<a href="#section1" class="prev"><<</a>
					<a href="#section1c" class="next">>></a>					
				</li>
				<li class="sub" id="section1c">
					<p class="title">ケンカはやめるにゃ</p>
					<p class="photo"><img src="<PATH>/imgb15.jpg" width="450" alt=""></p>
					<a href="#section1b" class="prev"><<</a>
				</li>				
			</ul>		
		</div>
		<div class="localScrollSection">
			<ul>
				<li class="sub" id="section2">
					<p class="title">にゃん</p>
					<p class="photo"><img src="<PATH>/imgb16.jpg" width="450" alt=""></p>
					<a href="#section2b" class="next">>></a>
				</li>
				<li class="sub" id="section2b">
					<p class="title">にゃにゃん</p>
					<p class="photo"><img src="<PATH>/imgb17.jpg" width="450" alt=""></p>
					<a href="#section2" class="prev"><<</a>
					<a href="#section2c" class="next">>></a>					
				</li>
				<li class="sub" id="section2c">
					<p class="title">はっ!</p>
					<p class="photo"><img src="<PATH>/imgb18.jpg" width="450" alt=""></p>
					<a href="#section2b" class="prev"><<</a>
				</li>				
			</ul>		
		</div>
		<div class="localScrollSection">
			<ul>
				<li class="sub" id="section3">
					<p class="title">背後にたつにゃ</p>
					<p class="photo"><img src="<PATH>/imgb19.jpg" width="450" alt=""></p>
					<a href="#section3b" class="next">>></a>
				</li>
				<li class="sub" id="section3b">
					<p class="title">木陰からじっとにゃ</p>
					<p class="photo"><img src="<PATH>/imgb20.jpg" width="450" alt=""></p>
					<a href="#section3" class="prev"><<</a>
					<a href="#section3c" class="next">>></a>					
				</li>
				<li class="sub" id="section3c">
					<p class="title">はっ!</p>
					<p class="photo"><img src="<PATH>/imgb21.jpg" width="450" alt=""></p>
					<a href="#section3b" class="prev"><<</a>
				</li>				
			</ul>		
		</div>
		<div class="localScrollSection">
			<ul>
				<li class="sub" id="section4">
					<p class="title">次のmacOSXだにゃ</p>
					<p class="photo"><img src="<PATH>/imgb22.jpg" width="450" alt=""></p>
					<a href="#section4b" class="next">>></a>
				</li>
				<li class="sub" id="section4b">
					<p class="title">にゃにゃにゃ!</p>
					<p class="photo"><img src="<PATH>/imgb23.jpg" width="450" alt=""></p>
					<a href="#section4" class="prev"><<</a>
					<a href="#section4c" class="next">>></a>					
				</li>
				<li class="sub" id="section4c">
					<p class="title">消しゴムの角はつかわせてもらったにゃ</p>
					<p class="photo"><img src="<PATH>/imgb24.jpg" width="450" alt=""></p>
					<a href="#section4b" class="prev"><<</a>
				</li>				
			</ul>		
		</div>
		<div class="localScrollSection">
			<ul>
				<li class="sub" id="section5">
					<p class="title">ウツにゃ</p>
					<p class="photo"><img src="<PATH>/imgb25.jpg" width="450" alt=""></p>
					<a href="#section5b" class="next">>></a>
				</li>
				<li class="sub" id="section5b">
					<p class="title">レジ担当にゃ</p>
					<p class="photo"><img src="<PATH>/imgb26.jpg" width="450" alt=""></p>
					<a href="#section5" class="prev"><<</a>
					<a href="#section5c" class="next">>></a>					
				</li>
				<li class="sub" id="section5c">
					<p class="title">はっ!</p>
					<p class="photo"><img src="<PATH>/imgb27.jpg" width="450" alt=""></p>
					<a href="#section5b" class="prev"><<</a>
				</li>				
			</ul>		
		</div>
	</div>
</div>

localScrollについて

localScrollは、格子状に配置した要素間をダイナミックにスクロールしてくれるプラグインです。
使い道ってどんな感じでしょうね。表示領域が限られた場所で複数のコンテンツを配置したいときなどでしょうか? なにか面白い使い道がありそうな気もしますね。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT
対応ブラウザ

関連するjQueryプラグイン

  • TiltedPage

    TiltedPage

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

  • onepageScroll

    onepageScroll

    1ページ単位でのスクロールを実装できる

  • OverScroll

    OverScroll

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

  • ContainedStickyScroll

    ContainedStickyScroll

    スクロールしてもどこまでもついてくるあの子

  • slideToucher

    slideToucher

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