Jqueryで背景が3D的にマウスの動きで動く!
jParallaxプラグインを使えばOK!
jParallaxプラグインを使うと、レイヤーのように画像を重ねたりマウスに応じて画像をスライドといったことが可能になります。 使い方は、簡単! 動かす、複数枚の画像をdivで囲んで、それらdivに対して、jparallax() の設定をするだけでOK。
<script src=”jquery.js”></script> <script src=”jquery.jparallax.js”></script>
<script> (function() { (‘#parallax’).jparallax(); }); </script>
#jparallax { position:relative; overflow:hidden; width: 2000px; height: 1500px; }
<div id=”jparallax”> <img src=”1.png” style=”width: 737px; height: 564px; ” /> <img src=”2.png” style=”width: 1438px; height: 832px; ” /> <img src=”3.png” style=”width: 639px; height: 36px; ” /> </div>
参考URL
http://webrocketsmagazine.com/entry/20111202/jquery-jparallax-plugin-tutorial.html
http://store.shopping.yahoo.co.jp/happychance/so-cn-3p.html
関連記事はこちら!
スポンサーリンク
タグ:jparallax