スクロールやマウスの動きに合わせて視差効果を実装するReactライブラリ・「React Just Parallax」

React Just Parallax

React Just Parallaxはスクロールやマウスの動きに合わせて視差効果を実装するReactライブラリです。軽量高速で簡単に書けるのが特長だそう。

マウスの動きに合わせた視差効果は以下の要領で👇

import { MouseParallax } from 'react-just-parallax';

<div className='wrapper'>
  <MouseParallax enableOnTouchDevice isAbsolutelyPositioned>
    <span className='ring'/>
  </MouseParallax>
</div>

スクロールなら以下のように書きます👇

import { ScrollParallax } from 'react-just-parallax';

<div className='wrapper'>
  <ScrollParallax isAbsolutelyPositioned>
    <span className='ring'/>
  </ScrollParallax>
</div>

マウスの動き及びスクロールにはそれぞれいくつかのオプションも用意されており、ある程度細かな挙動も制御出来るようになっています。

TSで書かれており、MITライセンスの元でソースコードが公開されています。

React Just Parallax