Skip to content

React library for scroll and mousemove parallax effect ✨ Open source, production-ready

Notifications You must be signed in to change notification settings

michalzalobny/react-just-parallax

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Just Parallax

React Just Parallax

React library for scroll and mousemove parallax effect ✨
Open source, production-ready


This repo contains the source code for React Just Parallax, source code for documentation page and source code for testing the package locally.

  • Written in TypeScript
  • Super lightweight
  • Easy to use
  • blazing fast

📦 NPM Link

📜 Examples

⚖️ License

  • React Just Parallax is MIT licensed.

✍🏻 Author

🐇 Quick start

npm install react-just-parallax
import { MouseParallax, ScrollParallax } from "react-just-parallax";

export const MyComponent = () => (
  <>
    <MouseParallax>
      <p>I'm reacting to mouse move</p>
    </MouseParallax>

    <ScrollParallax>
      <p>I'm reacting to scroll</p>
    </ScrollParallax>
  </>
);

Props for MouseParallax

Name Type Default Description
strength number 0.14 Parallax offset multiplier. Moving mouse by 10 pixels will move element position by 10px * strength
lerpEase number 0.06 Determines how quick the interpolation between offset values occurs (the higher the quicker)
isAbsolutelyPositioned boolean false If the element you want to use parallax on is positioned absolutely, set this prop to true
zIndex number | null null Specify element's outer container z-index (useful while using isAbsolutelyPositioned prop)
shouldPause boolean true Stops element from reacting to scroll and interpolating offset if it is out of view
enableOnTouchDevice boolean false Turns on/off parallax effect on touch devices
scrollContainerRef React.MutableRefObject | null null Use when element is situated in scrollable element other than window
parallaxContainerRef React.MutableRefObject | null null By default, element reacts to mousemove on window. You can specify any other container using this prop to make element react only within given container
shouldResetPosition boolean false Resets element's position if cursor leaves window or leaves parallaxContainerRef

Props for ScrollParallax

Name Type Default Description
strength number 0.14 Parallax offset multiplier. Scrolling by 10 pixels will move element position by 10px * strength
lerpEase number 0.06 Determines how quick the interpolation between offset values occurs (the higher the quicker)
isAbsolutelyPositioned boolean false If the element you want to use parallax on is positioned absolutely, set this prop to true
zIndex number | null null Specify element's outer container z-index (useful while using isAbsolutelyPositioned prop)
shouldPause boolean true Stops element from reacting to scroll and interpolating offset if it is out of view
enableOnTouchDevice boolean true Turns on/off parallax effect on touch devices
isHorizontal boolean false Enable if using horizontal scrolling
scrollContainerRef React.MutableRefObject | null null Use when element is situated in scrollable element other than window

Recalculating values on demand for ScrollParallax

It's sometimes necessary to update values such as element's position or sizes on demand, for example if the DOM structure changes.

Library can't know of this kind of changes so it is not able to handle it by itself, and that's when we need to use ScrollParallaxHandle to update them manually.

import { ScrollParallax, ScrollParallaxHandle } from "react-just-parallax";

export const MyComponent = () => {
  const [display, setDisplay] = useState(true);
  const scrollParallaxRef = useRef<ScrollParallaxHandle | null>(null);

  useEffect(() => {
    scrollParallaxRef.current?.updateValues();
  }, [display]);

  return (
    <>
      <ScrollParallax ref={scrollParallaxRef}>
        <p>I'm reacting to scroll</p>
      </ScrollParallax>

      {display && (
        <button onClick={() => setDisplay((false)}>
          Disappear me
        </button>
      )}
    </>
  );
};

About

React library for scroll and mousemove parallax effect ✨ Open source, production-ready

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published