レイヤー表示(?)JavaScript「jParallax」

なんと表現したらよいのか、サンプルを見ていただければなんとなくわかるかと。
画像を何枚も重ねて表示可能なほか動きます。
そんなjQueryベースのJavaScript「jParallax」です。 レイヤー表示(?)JavaScript「jParallax」サンプル

使用方法 jParallaxからjquery.jparallax.js、jQueryからjquery.js、jquery.dimensions.jsをダウンロードします。
head内に以下のように記述します。
<style type="css">#parallax{position:relative; overflow:hidden;}
</style>
<script type="text/javascript" src="http://yourdomain/jquery-1.2.6.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.dimensions.js"></script>
<script type="text/javascript" src="http://yourdomain/jquery.jparallax.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({});
});
</script>

あとは画像を表示していくのみです。
下に表示しているサンプルでは以下のようにしています。
<div id="parallax">
<div style="width:860px; height:273px;">
<img src="0_sun.png" alt="" style="position:absolute;left:300px;top:-12px;"/>
</div>
<div style="width:920px; height:274px;">
<img src="1_mountains.png" alt="" />
</div>
<div style="width:1100px; height:284px;">
<img src="2_hill.png" alt="" style="position:absolute; top:40px; left:0;" />
</div>
<div style="width:1360px; height:320px;">
<img src="3_wood.png" alt="" style="position:absolute; top:96px; left:0;"/>
</div>
</div>
レイヤー表示(?)JavaScript「jParallax」サンプル

sponsors

「レイヤー表示(?)JavaScript「jParallax」」をシェアする

記事作成:
記事URL:

TOP > > > レイヤー表示(?)JavaScript「jParallax」