Jqueryで背景が3D的にマウスの動きで動く!

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

topbnr01
http://store.shopping.yahoo.co.jp/happychance/so-cn-3p.html

ポチッ☆とクリックお願いします!
↓ ↓ ↓

  • にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

コメントは受け付けていません。

サブコンテンツ

TOP