画像を使った視差アニメーションを簡単なjQueryのコードで実装するTips

マウスの動きに応じて重ねた複数の画像
が動きその動きを使って視差効果を与える、
というjQueryプラグイン。ユニークでいいで
すね。ソースも軽量です。こういうの実装され
てるだけで、ちょっと味のあるデザインに
なりますよね。

視差アニメーション用のjQueryプラグインは今までもいくつかありましたけど、今回使用されてるものは割と簡単なコードだったので勉強にもなると思いメモ。

PLAX

マウスの動きに合わせて重ねられた画像がそれぞれ別の動きをするので結果的に視差効果が生じる、というもの。よくあるやつですね。Githubの404ページのアニメーションで使われてるスクリプトみたいです。

デモ

コード

(function($){
 
  var layers    = [],
      docWidth  = $(window).width(),
      docHeight = $(window).height()
 
  $(window).resize(function() {
      docWidth  = $(window).width()
      docHeight = $(window).height()
  })
  $.fn.plaxify = function (params){
    var layer    = {"xRange":0,"yRange":0,"invert":false},
        position = this.position()
 
    for(var param in params){
      if(layer[param]==0){
        layer[param] = params[param]
      }
    }
    layer.obj    = this
    layer.startX = position.left
    layer.startY = position.top
 
    if(layer.invert == false){
      layer.startX -= Math.floor(layer.xRange/2)
      layer.startY -= Math.floor(layer.yRange/2)
    } else {
      layer.startX += Math.floor(layer.xRange/2)
      layer.startY += Math.floor(layer.yRange/2)
    }
    layers.push(layer)
  }
  $.plax = {
    listLayers: function(){
      console.log(layers)
    },
    enable: function(){
      $(document).mousemove(function(e){
        var x      = e.pageX,
            y      = e.pageY,
            hRatio = Math.round((x/docWidth)*100)/100,
            vRatio = Math.round((y/docHeight)*100)/100
        $.each(layers, function(index,layer) {
          if(layer.invert != true){
            layer.obj.css('left',layer.startX + (layer.xRange*hRatio))
            layer.obj.css('top', layer.startY + (layer.yRange*vRatio))
          } else {
            layer.obj.css('left',layer.startX - (layer.xRange*hRatio))
            layer.obj.css('top', layer.startY - (layer.yRange*vRatio))
          }
        })
      })
    },
    disable: function(){
      clearTimeout(timer)
    }
  }
 
})(jQuery);

本体と上記プラグインを設置して、以下のように別途動作設定をします。

<script type="text/javascript"> 
    $(document).ready(function () {
      $('#plax-sphere-1').plaxify({"xRange":40,"yRange":40})
      $('#plax-logo').plaxify({"xRange":20,"yRange":20})
      $('#plax-sphere-2').plaxify({"xRange":10,"yRange":10})
      $('#plax-sphere-3').plaxify({"xRange":40,"yRange":40,"invert":true})
      $.plax.enable()
    })
  </script>

数値はマウスに合わせて動く範囲。

たとえば数値をあげてあげればこのように惑星のように大きく動く感じになります。

<script type="text/javascript">
    $(document).ready(function () {
      $('#plax-sphere-1').plaxify({"xRange":400,"yRange":400})
      $('#plax-logo').plaxify({"xRange":20,"yRange":20})
      $('#plax-sphere-2').plaxify({"xRange":10,"yRange":100})
      $('#plax-sphere-3').plaxify({"xRange":400,"yRange":400,"invert":true})
      $.plax.enable()
    })
  </script>

マークアップ

<div id="shell"> 
      <img src="img/plax_logo.png" width="136" height="70" id="plax-logo"/> 
      <img src="img/plax_sphere_small.png" width="93" height="92" id="plax-sphere-1"/> 
      <img src="img/plax_sphere_large.png" width="215" height="215" id="plax-sphere-2"/> 
      <img src="img/plax_sphere_small.png" width="93" height="92" id="plax-sphere-3"/> 
    </div>