Smooth Mousemove Triggered Parallax Effect In React – Just Parallax

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