パララックスエフェクトを実装する

今更感あるけど、このブログにパララックスエフェクトを実装した。

パララックスとは

視差効果のこと。
視点が動いた時に、近くのものほど大きく移動して、遠くのものはあまり動かないことを利用して奥行き感を表現する。アニメの撮影とかは、背景やキャラクターをレイヤーに分けて移動距離を別々に設定して撮影して奥行き感を演出している（と思う）。

実装する

Webでは縦スクロールに合わせてエフェクトかけるのが一般的なので、スクロール量が視点の移動距離に相当する。エレベーターに乗っていて背景が動くのをイメージするとよい。

以下のようにスクロールイベントでスクロール量を取得する。

$(window).on('scroll', function() {
  var scroll = $(this).scrolTop();
});

このスクロール量に対してオブジェクトの移動距離を求めればOK。
ここでは移動比率を0.4くらいに設定しています。実際は物体と視点と距離で視点移動で比率は変わるけども、視点と物体の距離は測れないので適当に設定。

var $target = $('#hoge');
$(window).on('scroll', function() {
  var scroll = $(this).scrolTop();
      move = Math.round(scroll * 0.4);
  $target.css({top: move});
});

移動距離を設定するのは、GPUレンダリングを考えて

$target.css('transform', 'translate3d(0px, '+move+'px, 0px)');

した方がよいかも。ブラウザ限定されるけどこちらの方がいい気がする。複数のオブジェクトを動かすときには比率をオブジェクトごとに変えればよい。