マウスの動きに合わせて画像が動くパララックス効果

マウスの動きに合わせて画像が動くパララックス効果

パララックス効果で作成されているサイトやプラグインは沢山ありますが、今回はとっても簡単なJQueryコードで作成されているPARALLAX || roXonのマウスの動きに合わせて画像が動くパララックス効果を紹介します。

マウスの動きに合わせて画像が動くパララックス効果

ここで紹介しているコードはPARALLAX || roXonのコードを基本に作成しています。元のコードを確認したい場合はPARALLAX || roXonのコードをご覧ください。

サンプル

まずはサンプルで動きを確認してみてください。div要素内にマウスが入ると画像が動きます。

マウスパララックス

サンプルのコード

サンプルの基本になっているコードを確認したい方はPARALLAX || roXonをご覧ください。

JQuery

<script type="text/javascript">
$(document).ready(function(){
distance = 200;//画像の移動距離
sensitivity = 17;//移動時の滑らかさ
var distHalf = distance / 2;

var parW = $('#par').width(),//要素の横幅をピクセル単位で取得します
    parH = $('#par').height();//要素の高さをピクセル単位で取得します。

$('.layer').each(function() {// それぞれの .layer 要素に対する処理を書く
    var layer = $(this);

    pixPos = distance * (layer.index() + 1);//引数で指定されたエレメントのインデックス番号を返す。
    pixPosHalf = distHalf * (layer.index() + 1);

    layer.width('+=' + pixPos);//distanceづつ変化
    layer.height('+=' + pixPos);
    layer.animate({left: '-' + pixPosHalf }, 0); //distHalfづつ変化
    layer.animate({top: '-' + pixPosHalf}, 0);
    
    wDiff2 = layer.width();
    hDiff2 = layer.height();

    var wDiff = ((wDiff2 / parW) - 1).toFixed(2);//小数点2までを返します
    var hDiff = ((hDiff2 / parH) - 1).toFixed(2);

    $('#par').mousemove(function(mousEv) {
        parOffset = $(this).offset();//ドキュメントの左上端を原点とした要素の位置を取得します。
        mouseX = (mousEv.pageX - parOffset.left);
        mouseY = (mousEv.pageY - parOffset.top);
    });

    // マウス及びレイヤースタート
    var parWhalf = parW / 2,
        parHhalf = parH / 2;
    var mouseX = parWhalf,
        mouseY = parHhalf;
    var posX = parWhalf,
        posY = parHhalf;
 
    setInterval(function() {//30ミリ秒(0.03秒)間隔で呼び出す
        posX += (mouseX - posX) / sensitivity;
        posY += (mouseY - posY) / sensitivity;
        layer.css({
            left: '-' + Math.round(posX * wDiff) + 'px',
            top: '-' + Math.round(posY * hDiff) + 'px'
        });
    }, 30);
});
});
</script>

html

<div id="par">       
 <div id="parallax-layer1" class="layer">
  <img src="画像アドレス1" alt="" />
 </div>      
 <div id="parallax-layer2" class="layer">
  <img src="画像アドレス2" alt="" />
 </div>                                
 <div id="parallax-layer3" class="layer">
  <img src="画像アドレス3" alt="" />
 </div>          
 <div id="parallax-layer4" class="layer">
  <img src="画像アドレス4" alt="" />
 </div>      
 <div id="parallax-layer5" class="layer">
  <img src="画像アドレス5" alt="" />      
 </div>
</div>​

CSS

  • cssのコードは画像サイズなどによって画像位置の調整が必要です。
  • 要素位置を指定してやると横方向のみ、縦方向のみの動きになります。
    例えば(top: -300px!important;)にすると横方向のみの動きになります。
#par{
    position:relative;
    overflow:hidden;
    margin:30px auto;
    width:1200px;
    height:500px;
    background:url(画像アドレス) -200px 0;
}
.layer{
    position:absolute;
    width:100%;
    height:100%;
}
#parallax-layer1{
    background:url(画像アドレス) repeat 0 0;
}
#parallax-layer2{
    background:url(画像アドレス) repeat 0 0;
}
#parallax-layer3{
    top: -300px!important;
}
#parallax-layer4{
    background:url(画像アドレス) repeat 0 0;
}
#parallax-layer5{
    background:url(画像アドレス) repeat-x 0 0;
    top: 170px!important;
}

以上がマウスの動きに合わせて画像が動くパララックス効果でした。

最終更新日: 2013年3月11日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

マウスの動きに合わせて画像が動くパララックス効果の関連記事

マウスの動きに合わせて画像が動くパララックス効果” への5件のコメント

  1. 初めましてめぐみと言います。
    レイヤー式のパララックス作品を作ってみたくて探していたらここに来ました。
    とてもわかりやすく助かっています!

    初心者の質問で申し訳ないのですが、動く画像の間に挟んだpng画像を動かないように固定するのにはどうしたらいいのでしょうか?
    例で言うとdemoの山だけ動かない感じにしたいです。

    初心者の質問失礼しました。よろしくお願いします。

    • コメントありがとうございます。

      サンプルでは山の箇所のCSSは下記のようになってます。

      #parallax-layer3{
          top: -300px!important;
      }
      

      このコードを下記のようにすると固定されます。

      #parallax-layer3{
          top: -300px!important;
          left: 0px!important;
      }
      

      left: 0px!important;の数値は使用する画像の横幅によって微調整してください。
      例えばパララックスで表示される全体幅が1200pxになっており、山の箇所で使われる画像の幅が2000pxになっているとします。その場合はleft: 0px!important;~  -800px!important;の調整が可能になります。

      又何かありましたらお気軽にご質問してください。

    • また質問すみません。
      http://www.haunted-hills.com/3pyHPsZ5
      このURL先のゾンビのように縦横に動くけどズボンの画像の切れ目までは見えないようにするにはどうしたらいいでしょうか?

      例で言うとdemoの草が縦横動くけど下からは離れないようにしたいのですが…。
      background:url(画像アドレス) repeat 0 0;にすると縦横に動くのですが、草が宙に浮いてしまい変な感じになってしまいます。

      何度も失礼します。よろしくお願いします。

    • 草が宙に浮いてしまい変な感じになってしまいます。の件の返信です。

      ブラウザ(インターネットをソフト)例えばIE、Chromeなどによって挙動が違うのかも知れませんが、取りあえずIE8以上、Chromeなどのモダンブラウザでの簡単なテストをしたところサンプル(http://detarame.moo.jp/sample/mouse-parallax.html)の草は横方向にしか動きません。
      ですので、めぐみさんが言われる縦横方向の動きは確認できず、横方向のみの動きです。

      サンプルのコードにありますが、草の動きはcssで縦に動くのを制御してあります。

      #parallax-layer5{
          background:url(画像アドレス) repeat-x 0 0;
          top: 170px!important;
      }
      


      この中のコード top: 170px!important;で縦に動くのを制御してあります。この top: 170px!important;が抜けていると縦横方向に動いてしまいますが、もしかしたらめぐみさんがお使いの環境では対応できないのかも知れません。

      又何かあったらお気軽に質問してください。

  2. 返信ありがとうございます!出来ました!
    またわからない事があったら質問させてください。
    ありがとうございました。

めぐみ へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*