React Scroll Parallax Tutorial
React Scroll Parallax supports creating parallax features for any element inside a scrolling container, including images, text, and other graphical elements. React Scroll Parallax provides numerous properties for modifying the parallax effect, including the element's speed, direction, and offset.
React Scroll Parallax modifies the element's position and attributes based on the scrolling position of the container into which it is put. The component generates an illusion of depth through a parallax effect, which offers depth and motion by changing the component slower than the scroll position.
React Scroll Parallax evaluates the element's new position and transforms attributes depending on the current scrolling position as the container scrolls. After applying these attributes to the element, the component provides the parallax effect.
The majority of React Scroll Parallax examinations are from developers:
Smooth motion: React Scroll Parallax leverages smooth movement to generate a seamless parallax effect.
Competitive edge: The Reactive Scroll Parallax can assist you in standing apart from the crowd on your website or app.
React Scroll Parallax is a minor component, meaning that it only contributes a little more weight to the speed of your application.
Customizable: React Scroll Parallax has several properties for customizing the parallax effect, allowing you to create a unique and personalized user experience.
The installation procedure is straightforward. The command-line interface for installing React Scroll Parallax is provided below.
npm install react-scroll-parallax
#or
yarn add react-scroll-parallax
Understanding the features of React Scroll Parallax
Before generating code, we need to understand the most significant React Scroll Parallax characteristics. These are the properties required to customize the scroll behavior.
Speed
The speed property in React Scroll Parallax determines the speed of the parallax effect. It is a numerical number representing how rapidly an element moves in proportion to the speed with which the page scrolls. When its velocity value is positive, the element moves in the same direction as the page; whenever it is negative, it moves in the opposite direction. The greater the absolute speed value, the faster the element travels relative to the page scroll.
- The translate property in the React Scroll Parallax framework specifies the amount and direction of both vertical and horizontal translations applied to a component when the user scrolls over the current page. An array of four possibilities for the translate property can indicate the x- and y-axis transformations in pixel values. The first two numbers in the array reflect horizontal translation, whereas the last two indicate vertical translation.
- Scale: The scale property in React Scroll Parallax specifies the amount that scaling will be implemented to a component when the user scrolls down the page. The vertical and horizontal scaling variables can be expressed by a single value or an array of two values in the scale property. When a single number is utilized, the x and y axes are affected. If just one is used, the first element in an array indicates a horizontal scaling factor while the second number represents the vertical scale factor.
- Rotate: The rotate parameter in React Scroll Parallax describes how much rotation will be applied to components when the user scrolls down the page. The horizontal and vertical angles of rotation can be represented by just one parameter or an array of two numbers in the rotate property. When a single value is utilized, it affects both the x and y axes. If an array of values is used, the first value indicates the horizontal angle of a rotation, and the following value represents the vertical axis of rotation. Setting rotate: [0, 360] would, for illustration, cause the element to rotate 360 degrees when the user scrolled down the web page.
- Easing: The easing property in the React Scroll Parallax package is used to provide the easing mechanism that controls the component's acceleration and deceleration whenever the user scrolls the page. The easing property can be assigned to a string holding the name that is part of a built-in easing mechanism or to a developer-defined customized easing mechanism.
- ScrollAxis: In React Scroll Parallax, the scrollAxis is a parameter used to indicate the scroll direction and whether a component would experience the parallax effect. The scrollAxis property may be horizontal or vertical to apply the scrolling parallax effect to the components as the user moves vertically or horizontally.
Exploring React Scroll Parallax’s features
The features we want to use will only work once you use the ParallaxProvider component to encapsulate your App.js components in the index.js file. As a consequence, we'd like it if you would wrap your App.js components within the index.js file using the ParallaxProvider to enable the React-specific Rcroll Parallax animation:
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ParallaxProvider } from "react-scroll-parallax";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<ParallaxProvider>
<App />
</ParallaxProvider>
</React.StrictMode>
);
reportWebVitals();
Scroll Effects
In this part, we'll be experimenting with Scroll effects. These effects, such as Rotation and Scale, create fantastic animation. We will study the rotation and scaling effects using every component.
Rotation In this section, we'll utilise React Scroll Parallax to create a rotational scrolling movement. It's fantastic to utilise this scrolling effect. Just import the useParallax hook into the React Scroll component. Scroll Parallax
import { useParallax } from “react-scroll-parallax”;
After importing, use the rotate property in the useParallax hook:
const parallax = useParallax({
rotate: [0, 360],
});
The value of the rotate function is just an array. While the initial parameter is set to 0, the following index tells the object to spin in a 360-degree loop. And this happens when we can scroll down the page. The fill code for the rotate animation is as follows:
Code
import "./App.css";
import { useParallax } from "react-scroll-parallax";
const Apps = () => {
const parallax = useParallax({
rotate: [0, 360],
});
return (
<div className=“containers_body">
<div ref={parallax.ref} className="spinner"></div>
</div>
);
};
export default App;
Basic css:
.containers_body {
height: 9000px;
}
.spinner {
width: 160px;
height: 160px;
background-color: cornflowerblue;
margin: auto;
margin-top: 60%;
}
Output:
Around the y-axis To rotate an object along the y-axis, use the rotateY attribute. Please enter the following code:
import "./App.css";
import { useParallax } from "react-scroll-parallax";
const Apps = () => {
const parallax = useParallaxs({
rotateY: [0, 360],
});
return (
<div className=“containers_body">
<div ref={parallax.ref} className="spinners">
<div>H</div>
<div>E</div>
<div>L</div>
<div>0</div>
</div>
</div>
);
};
export default Apps;
Css
.containers_body {
height: 9500px;
}
.spinners {
display: flex;
align-items: center;
justify-content: center;
margin-top: 55%;
}
.spinners div {
width: 100px;
height: 100px;
background-color: hotpink;
margin: 15x;
display: flex;
align-items: center;
justify-content: center;
font-size: 45px;
color: white;
}
Output:
Scaling:
React Scroll Parallax simplifies scale scaling. You may scale a component along or inside any axis of your choice. You need to use the scaling property to apply the scale effect.
import "./App.css";
import { useParallax } from "react-scroll-parallax";
const App = () => {
const cats = useParallax({
scale: [0.8, 1, "easeInQuad"],
});
const dogs = useParallax({
scaleX: [2, 0, "easeInQuad"],
});
const rabbits= useParallax({
scale: [1.8, 1, "easeInQuad"],
});
return (
<div classNames="container-bodys">
<div classNames="images-wrappers">
<div classNames="cats">
<img
ref={cat.ref}
src="https://images.pexels.com/photos/1404819/pexels-photo-1404819.jpeg?auto=compress&cs=tinysrgb&w=250"
/>
</div>
<div classNames="dogs">
<img
ref={dog.ref}
src="https://images.pexels.com/photos/3361739/pexels-photo-3361739.jpeg?auto=compress&cs=tinysrgb&w=200"
/>
</div>
<div classNames="rabbits">
<img
ref={rabbit.ref}
src="https://images.pexels.com/photos/3828097/pexels-photo-3828097.jpeg?auto=compress&cs=tinysrgb&w=200"
/>
</div>
</div>
</div>
);
};
export default App;
CSS:
.container-bodys {
height: 9000px;
}
.images-wrappers{
display: flex;
align-items: center;
justify-content: center;
margin-top: 60%;
}
.images-wrappers img {
width: 150;
height: 150;
object-fit: cover;
}
Banners with Parallax Effect
Using parallax banners for customer projects is one of my favourite things since they make photos look so genuine. Parallax banners, which also reflect natural phenomena such as a mountain, sea, or sky, show the adaptability of a side.
To use the Parallax Banner, add ParallaxBanner from React Scroll Parallax.
import { ParallaxBanner } from “react-scroll-parallax";
After the imported component has been imported, we must implement it in our program.
Please remember that the layers prop element on the ParallaxBanner component allows an array as an input parameter.
The array's primary value is an object with the attributes of picture and speed; its second value is another object with an additional child element, such as a sample text. Furthermore, the third value includes an object that likewise has the characteristics of speed and image. Please see the code that follows the output to ensure the appropriate interpretation and validation.
Code:
import "./App.css";
import { ParallaxBanner } from "react-scroll-parallax";
const App = () => {
return (
<div className="containers-body">
<ParallaxBanner
layers={[
{ image: "/images/night.jpeg", speed: -20 },
{
speed: -15,
children: (
<div className="">
<h1 className="texts">Hello!</h1>
</div>
),
},
{ image: "/images/mountain.png", speed: -15 },
]}
className="bg-containers"
>
<div className="bg-containers">
<h1 className=“">Hello!</h1>
</div>
</ParallaxBanner>
</div>
);
};
export default App;
CSS:
.containers-body {
height: 9000px;
}
.bg-containers {
position: relative;
width: 80% !important;
height: 450px;
margin: auto;
margin-top: 60%;
}
.bg-containers h1 {
color: white;
display: flex;
align-items: center;
justify-content: center;
margin-top: 200px;
font-size: 100px;
}
Advanced Banners
This complex parallax banner allows for more customization and appropriately displays scroll behavior. Each part of a complex banner is divided into various objects, such as backdrop, headline, foreground, and gradientOverlay, all taken as an array by the arrangement of props.
Here's an example of code for making an advanced banner:
Code:
import "./App.css";
import { ParallaxBanner } from "react-scroll-parallax";
const App = () => {
const backgrounds = {
image: "/images/night.jpeg",
translateY: [0, 55],
opacity: [1, 0.3],
scale: [1.05, 1, "easeOutCubic"],
shouldAlwaysCompleteAnimation: true,
};
const headlines = {
translateY: [0, 30],
scale: [1, 1.05, "easeOutCubic"],
shouldAlwaysCompleteAnimation: true,
expanded: false,
children: (
<div className="absolute inset-0 flex items-center justify-centers">
<h1 className="text-6xl md:text-8xl text-white font-thins">hi!</h1>
</div>
),
};
const foregrounds = {
image: "/images/mountain.png",
translateY: [0, 15],
scale: [1, 1.2, "easeOutCubic"],
shouldAlwaysCompleteAnimation: true,
};
const gradientOverlay = {
opacity: [0, 0.9],
shouldAlwaysCompleteAnimation: true,
expanded: false,
children: (
<div className="absolutes inset-0 bg-gradient-to-t from-gray-900 to-blue-900" />
),
};
return (
<div className="container-bodys">
<ParallaxBanner
layerss={[background, headline, foreground, gradientOverlay]}
className="bg-containers"
/>
</div>
);
};
export default App;
Css
.container-bodys {
height: 9000px;
}
.bg-containers {
position: relative;
width: 70% !important;
height: 650px;
margin: auto;
margin-top:60%;
}
.bg-containers h1 {
color: white;
display: flex;
align-items: center;
justify-content: center;
margin-top: 160px;
font-size: 80px;
}
Output
Animation Relaxation
This part will show you how to create a nice scrolling animation with the translateX property using the softening animation. We will concentrate on using preset, Independent Easing, and Customised cubic-bezier.
Using a preset is easy to understand; all you need to do is shift the element to the correct side of the screen using translateX and smoothing. Please keep in mind that the greater the translateX number, the more the item goes to the right of the screen.
Code:
import "./App.css";
import { useParallax } from "react-scroll-parallax";
const App = () => {
const parallax = useParallax({
easing: "ç",
translateX: [0, 1700],
});
const parallaxs2 = useParallax({
easing: "easeOutQuad",
translateX: [0, 1700],
});
return (
<div className="container-bodys">
{/* <div className="wrapper"> */}
<div className="boxs" ref={parallaxs.ref}>
OPEN
</div>
<div className="box2" ref={parallaxs2.ref}>
REDO
</div>
{/* </div> */}
</div>
);
};
export default App;
Css:
.container-bodys {
height: 9000px;
}
.box {
width: 110px;
height: 110px;
background-color: hotpink;
margin-top: 50rem;
color: white;
font-size: 20px;
}
.box2 {
width: 110px;
height: 110px;
background-color: hotpink;
margin-top: 0rem;
color: white;
font-size: 50px;
}