jQuery背景画像動かすパララックス

質問

http://yuki930.v-colors.com/
このサイトの背景画像を作りたいです。
ですが、まず画像背景の作り方がわかりません。
それとマウスを動かすと立体的に動く仕組みのやり方がわかりません。
(上のサイトは少し弧を描くように回転しています。)

検索で探しましたところこのようなものがヒットしました。

マウスの動きに追従して奥行きのある背景移動をするjQueryプラグイン「jquery.parallax.js」
http://www.webopixel.net/javascript/381.html

たぶんこれであってると思います。

一回違うやつを作ってみました。

jQuery/CSS3で雲をゆらゆらさせる
http://www.webopixel.net/javascript/718.html

しかし、背景が透明にならず重なってしまいました。（Javasucriptのほうはうまく組み込めました。）

まず、背景画像を透明にするやり方が一点と

次に、マウスを動かすと背景が立体的に弧を描くようにするやり方

以上二点を教えて頂きたく存じます。何卒よろしくお願い申し上げますm(_ _)m

回答No.1

fujillin

ご提示のサイト（yuki930.v-colors.com）では、1枚の（div要素の）背景画像をゆっくりと自動的にアニメーションしているだけだと思います。
動かしている背景画像はこちらのようです。
　http://yuki930.v-colors.com/wp-content/themes/portfolio_pastel/css/../images/bgBody.jpg

方法は背景移動の解説サイトと同じようですが、移動対象のレイヤーが1枚だし、固定のアニメーションなので、もっと単純だとも言えます。

＞まず、背景画像を透明にするやり方が一点と
ご提示のサイトでは、例えば雲の背景にはpng画像を用いています。
　http://yuki930.v-colors.com/wp-content/themes/portfolio_pastel/css/../images/bgGmenubg.png
透過png（または透過gif）などで実現することができるでしょう。
　http://hooktail.org/computer/index.php?%C6%A9%B2%E1png%A4%CE%BA%EE%A4%EA%CA%FD
　http://www.kuronowish.com/~django/photo/alpha/png_alpha1.html

＞マウスを動かすと背景が立体的に弧を描くようにするやり方
ご提示のサイトではそのような動作はしていないと思います。(単純に垂直移動のみではないでしょうか？）
マウスの移動に合わせて、アニメーションの変化量（移動量）などを変えるような制御をしてあげれば弧でも円でも可能になります。
方法的には、特に背景に限らず「マウスについてくるアイコン」などと似たようなことです。

参考サイトのものとは違うようですが、別のパララックスの紹介サイトの例をみてみると、色々な効果が紹介されているのでわかりやすいかも・・・
　http://stephband.info/jparallax/index.html