フロントエンドエンジニアになりたい

デザイナーなのかコーダーなのかディレクターなのかよくわからない人のブログ。趣味で絵を描きました(過去形)

カーソルと傾きでパララックスするやつ作った

github.com

軽量なのが欲しかったので作りました。わりと軽いと思います。 スマホなどでの傾きでも動くんですが、実際さわってみると45度ぐらいを角度0でやったほうがいいのかもと思ったり。。。

デモ

それぞれの.layerの要素にdata-depthを設定します。 0~1の間で奥にあるものほど大きな数字にします。 ちなみに.layerはすべて同じ大きさなので、例えば動きの大きい奥のものほど大きくしたい場合は、 その子要素で適当にCSSで大きくしてあげてください。

<div class="parallax-wrapper">
  <!-- set depth 0 ~ 1 -->
  <div class="layer" data-depth="1">
    <!-- something to contents -->
  </div>
  <div class="layer" data-depth=".5">
    <!-- something to contents -->
  </div>
  <div class="layer" data-depth="0">
    <!-- something to contents -->
  </div>
</div>

設定はCSSと同じ要領でやってあげます。

var elm = document.querySelector('.parallax-wrapper');
var cursorParallax = new CursorParallax(elm, {
  easing: 'ease-out',
  duration: '.6s',
  mousemoveRatio: 0.5,
  deviceorientationRatio: 1,
  mousemove: true,
  deviceorientation: true
});

mousemoveRatiodeviceorientationRatioというのはそれぞれの動きに対する倍率です。 この値を適当に調整してあげて好みの動きの大きさにしてあげると良いと思います。