React Next Parallax

A Performant Customizable React Component Providing the Parallax Effect

Main Demo • Attributes Demo • Control Element Demo • Storybook

[![install size](https://img.shields.io/badge/dynamic/json?url=https://packagephobia.com/v2/api.json?p=react-next-parallax&query=$.install.pretty&label=install%20size&style=flat-square)](https://packagephobia.now.sh/result?p=react-next-parallax) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-next-parallax?style=flat-square)](https://bundlephobia.com/package/react-next-parallax@latest) [![npm downloads](https://img.shields.io/npm/dm/react-next-parallax.svg?style=flat-square)](https://npm-stat.com/charts.html?package=react-next-parallax) [![Known Vulnerabilities](https://snyk.io/test/npm/react-next-parallax/badge.svg)](https://snyk.io/test/npm/react-next-parallax)

## Table of Contents - [Features](#features) - [Installation](#installation) - [Usage](#usage) - [Attributes](#attributes) - [Props](#props) - [Default Values](#default-values) - [Events/Callbacks](#eventscallbacks) - [Ref](#ref) - [Credits](#credits) - [Author](#author) - [License](#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 ```bash $ npm install react-next-parallax ``` Once the package is installed, you can `import` the component: ```js 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: ```html

``` ### 2. Add the desired `data-parallax-...` attribute Add the desired [attribute](#attributes) to the images or any other element you want the effect to be applied to. (You can check the [Attributes Demo](https://rashidshamloo.github.io/react-next-parallax_demo/attributes) to learn more about each attribute) ```js

``` ### 3. Place your elements inside `` Place the elements/components you want to have the parallax effect inside `` Example: ```js

``` ### 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`](https://www.npmjs.com/package/react-next-tilt#props) for customization as well. Example: ```js

``` ## 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/translate) property instead of [`transform: translate()`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/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](https://rashidshamloo.github.io/react-next-parallax_demo/attributes) to learn more about each attribute.

Name	Description	Value Represents	Transform functions overwritten	Demo
data-parallax-offset="±number"	Moves (translates) the element based on the tilt angle. Elements with positive numbers will appear to be in the front and elements with negative numbers will appear to be in the back. Higher numbers increase the amount of movement.	Percentage of the element's size	`translate()` `translateX()` `translateY()` `translate3d()`	Offset Demo
data-parallax-opacity="start;end"	Changes the opacity of the element based on the tilt angle.	Opacity of the element	`none (opacity property)`	Opacity Demo
data-parallax-scale="start;end"	Changes the scale of the element based on the tilt angle.	Scale of the element	`scale()` `scaleX()` `scaleY()` `scale3d()`	Scale Demo
data-parallax-rotation="start;end"	Changes the rotation of the element based on the tilt angle.	Rotation angle of the element in degrees	`rotate()` `rotateZ()` `rotate3d()`	Rotation Demo
data-parallax-skew="start;end"	Changes the skew angle of the element based on the tilt angle.	Skew angle of the element in degrees	`skew()` `skewX()` `skewY()` `skew3d()`	Skew Demo

## Props > All props are optional > In addition to these props, you can use: > > - Any of the [`react-next-tilt`](https://www.npmjs.com/package/react-next-tilt#props) props like `scale`, `disableScrollOnTouch`, `controlElement`, etc. > - Any valid `HTMLDivElement` props like `className=''`, `data-...='...'`, `onMouseMove={...}` etc. they will be applied to the container element.

Name	Description	Default
animationMode	Determines the animation mode when animating `data-parallax-...="x;y"` attributes `center-to-edge`: the value will be `x` at the center and change towards `y` relative to the distance from the center on all sides. \| initial value = `x` `edge-to-edge-x`: the value will be `x` at the left edge and `y` at the right edge. \| initial value = `x + (x - y / 2)` `edge-to-edge-y`: the value will be `x` at the top edge and `y` at the bottom edge. \| initial value = `x + (x - y / 2)` `edge-to-edge-both`: the value will be `x` at the top left corner and `y` at the bottom right corner. \| initial value = `x + (x - y / 2)` `"center-to-edge" \| "edge-to-edge-x" \| "edge-to-edge-y" \| "edge-to-edge-both"`	"center-to-edge"
animationReverse	Reverses the animation direction for the specified attribute `'none'` : doesn't modify the direction `'all'` : reverses direction for all attributes `'all-except-offset'` : reverses direction for all attributes except `data-parallax-offset` `'offset'` : reverses direction for the `data-parallax-offset` attribute `'opacity'` : reverses direction for the `data-parallax-opacity` attribute `'scale'` : reverses direction for the `data-parallax-scale` attribute `'rotation'` : reverses direction for the `data-parallax-rotation` attribute `'skew'` : reverses direction for the `data-parallax-skew` attribute `"all" \| "all-except-offset" \| "offset" \| "opacity" \| "scale" \| "rotation" \| "skew" \| "none"`	"none"
offsetMultiplier	Multiplier applied to all offset values `number`	1
opacityMultiplier	Multiplier applied to all opacity values `number`	1
scaleMultiplier	Multiplier applied to all scale values `number`	1
rotationMultiplier	Multiplier applied to all rotation values `number`	1
skewMultiplier	Multiplier applied to all skew values `number`	1
overflowHiddenEnable	Enables/Disables `overflow: hidden` on the tilt element Note: Disable if you want to set up your own composition with some elements being outside the frame. `boolean`	true

## Default Values This component modifies the default values of some of [`react-next-tilt`](https://www.npmjs.com/package/react-next-tilt#props) props to better match the provided effect. The list of the modified props and their default values are as follows:

Name	Default
perspective	"1200px"
scale	1.05
shadowEnable	true
shadow	"0 0 1.5rem rgba(0, 0, 0, 0.5)"
CSSTransition	"all 0.3s ease-out"
spotGlarePosition	"all"
spotGlareSizePercent	100

## Events/Callbacks This component has the same events/callbacks as [`react-next-tilt`](https://www.npmjs.com/package/react-next-tilt#eventscallbacks). ## Ref This component's ref object contains the same properties and works the same way as [`react-next-tilt`](https://www.npmjs.com/package/react-next-tilt#ref)'s ref. ## Credits Images used in demos are by [Yuliya Pauliukevich](https://www.vecteezy.com/members/klyaksun) on [vecteezy.com](https://www.vecteezy.com/) Inspired by [atropos.js](https://atroposjs.com/) ## Author Rashid Shamloo (github.com/rashidshamloo) ## License [MIT](LICENSE)