Just Parallax is a React component for creating a smooth parallax effect that reacts to scroll or cursor movement.
How to use it:
1. Install and import the Just Parallax package.
# Yarn $ yarn add react-just-parallax # NPM $ npm i react-just-parallax
import { MouseParallax, ScrollParallax } from "react-just-parallax";
2. Add the parallax components to the app.
export const MyComponent = () => ( <> <MouseParallax> <p>I'm reacting to mouse move</p> </MouseParallax> <ScrollParallax> <p>I'm reacting to scroll</p> </ScrollParallax> </> );
3. Available props.
export interface MouseParallaxProps { strength?: number; children?: React.ReactNode; parallaxContainerRef?: React.MutableRefObject<any> | null; scrollContainerRef?: React.MutableRefObject<any> | null; //Should be passed if parallaxed element is situated in other scrollable HTML element shouldResetPosition?: boolean; enableOnTouchDevice?: boolean; lerpEase?: number; isAbsolutelyPositioned?: boolean; zIndex?: number | null; shouldPause?: boolean; }
export interface ScrollParallaxProps { strength?: number; children?: React.ReactNode; scrollContainerRef?: React.MutableRefObject<any> | null; enableOnTouchDevice?: boolean; lerpEase?: number; isHorizontal?: boolean; isAbsolutelyPositioned?: boolean; zIndex?: number | null; shouldPause?: boolean; }
Preview:
Download Details:
Author: michalzalobny
Live Demo: View The Demo
Download Link: Download The Source Code
Official Website: https://github.com/michalzalobny/react-just-parallax
License: MIT