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ライセンスの元でソースコードが公開されています。
