複数要素を小気味良く動かせるJavaScript「Magical Scroll」

jQuery Easing Pluginという動きに特化したプラグインもありますが、::Magical Scroll::を使用すると簡単に複数の要素を小気味良く連動して動かすことが可能です。

使用方法

::Magical Scroll::からファイルをダウンロードします。
また、jquery.jsをあわせてダウンロードしてください。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.magicScroller.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('#id名1').magicScroller({
		mask:$('#id名2'), //表示させたい領域
		elements:$('#id名1 .class名'), //表示させたい要素
		displaytype:'row' //表示タイプ（row,one,column）
	});
});
</script>

あとは下記のように要素を記述していけば完成です。


<div id="id名1">
	<div id="id名2">
		<div class="class名"></div>
		<div class="class名"></div>
		<div class="class名"></div>
		<div class="class名"></div>
		<!-- 以下要素分 -->
	</div>
</div>

サンプル

row one column

Javascriptサンプルページ一覧

skuare.net