Table of Contents

• Features
• Installation
• Usage
• Attributes
• Props
• Default Values
• Events/Callbacks
• Ref
• Credits
• Author
• License

Features

• Easy to use
• Highly customizable
• Built with performance in mind
• Built from the ground up using React Hooks/TypeScript (is not a port of another library)
• Minimum amount of component re-renders
• Typed props with JSDoc descriptions
• Tested extensively using Cypress/Storybook
• Plus all of the features of react-next-tilt like:
  • Touch and Gyroscope Support
  • Two customizable glare effects (spot/line)
  • Scale on Hover/Touch
  • Shadow on Hover/Touch
  • Disable Scroll on Touch
  • Full-Page Listening
  • Control Element
  • and more

Installation

$ npm install react-next-parallax

Once the package is installed, you can import the component:

import { Parallax } from 'react-next-parallax';

Usage

1. Set up your scene (HTML/CSS)

For multi-layer images, separate each layer into an individual image and put them inside a container so that they are stacked on top of each other. (usually with a position:relative container and position:absolute images)

Simplified example using Tailwind:

<div className="relative w-[800px] h-[600px] [&>img]:absolute [&>img]:inset-0">
  <img src="image1.jpg" />
  <img src="image2.jpg" />
  <img src="image3.jpg" />
</div>

2. Add the desired data-parallax-... attribute

Add the desired attribute to the images or any other element you want the effect to be applied to. (You can check the Attributes Demo to learn more about each attribute)

<div className="relative w-[800px] h-[600px] [&>img]:absolute [&>img]:inset-0">
  <img src="image1.jpg" data-parallax-offset="-5" />
  <img src="image2.jpg" />
  <img src="image3.jpg" data-parallax-offset="5" />
</div>

3. Place your elements inside <Parallax></Parallax>

Place the elements/components you want to have the parallax effect inside <Parallax></Parallax>

Example:

<Parallax>
  <div className="relative w-[800px] h-[600px] [&>img]:absolute [&>img]:inset-0">
    <img src="image1.jpg" data-parallax-offset="-5" />
    <img src="image2.jpg" />
    <img src="image3.jpg" data-parallax-offset="5" />
  </div>
</Parallax>

4. Make the required adjustments

• You may want to change the size of the images depending on the values chosen for the data-parallax-offset so the edges are not visible when tilted to extreme angles.
• You can also change the props like animationMode and offsetMultiplier to achieve the exact effect you want.

You can use all of the props of react-next-tilt for customization as well.

Example:

<Parallax offsetMultiplier={2} scale={1.2}>
  <div className="relative w-[800px] h-[600px] [&>img]:absolute [&>img]:inset-0">
    <img src="image1.jpg" data-parallax-offset="-5" />
    <img src="image2.jpg" />
    <img src="image3.jpg" data-parallax-offset="5" />
  </div>
</Parallax>

Attributes

• All attributes are optional
• You can use multiple attributes at the same time.
• You can use transform functions at the same time as using an attribute. each attribute only overwrites its own transform function not the whole transform.
• If you want to apply animations to an element and the properties you want to animate overlap with the transform function used by the attribute, you can:
  • Use the separate properties for animation instead. (e.g. translate property instead of transform: translate() function)
  • Put the element inside a container/parent element and animate it instead.
• To reverse the animation direction of attributes that take two numbers as input, you can either swap the start and end numbers ("start;end" → "end;start") or use the animationReverse prop.
• You can change the animation mode for data-parallax-...="x;y" attributes using the animationMode prop.
• You can use the specific multiplier prop for each attribute to easily adjust the values after setting them up.
• You can check the Attributes Demo to learn more about each attribute.

Props

All props are optional

In addition to these props, you can use:

• Any of the react-next-tilt props like scale, disableScrollOnTouch, controlElement, etc.
• Any valid HTMLDivElement props like className='', data-...='...', onMouseMove={...} etc. they will be applied to the container element.

Default Values

This component modifies the default values of some of react-next-tilt props to better match the provided effect. The list of the modified props and their default values are as follows:

Events/Callbacks

This component has the same events/callbacks as react-next-tilt.

Ref

This component's ref object contains the same properties and works the same way as react-next-tilt's ref.

Credits

Images used in demos are by Yuliya Pauliukevich on vecteezy.com

Inspired by atropos.js

Author

Rashid Shamloo (github.com/rashidshamloo)

License

MIT