• かちびと.net

    画像を使った視差アニメーションを簡単なjQueryのコードで実装するTips。なかなかインパクトを与えられるのでいいかもしれませんね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

画像を使った視差アニメーションを簡単な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>

画像貼って、動作設定したセレクタに合わせてid指定するだけ。手軽でいいですね。

視差効果っていうと、Nikeのサイト思い出しますね・・この手のは使ったこと無いのでどこかで使ってみたいです。

PLAX / Doc in Github

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services