複数要素を小気味良く動かせるJavaScript「Magical Scroll」
jQuery Easing Pluginという動きに特化したプラグインもありますが、::Magical Scroll::を使用すると簡単に複数の要素を小気味良く連動して動かすことが可能です。
sponsors
使用方法
::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>
複数要素を小気味良く動かせるJavaScript「Magical Scroll」サンプル
sponsors
記事作成:2010年5月25日 10:08
記事URL:http://www.skuare.net/2010/05/javascriptmagical_scroll.html
TOP > javascript > その他 > 複数要素を小気味良く動かせるJavaScript「Magical Scroll」
前の記事:テキストを好きなフォントで表示できるJavaScript「cufon」
次の記事:色々なエフェクトがある画像ズームJavaScript「Cloud Zoom」
あなたにはこちもお勧め!
jQuery プラグインまとめ!