In React applications, the react-parallax-tilt library provides a way to introduce captivating parallax tilt effects to enhance user interfaces. This library integrates interactive depth and motion, creating visually engaging web components. Developers can easily implement these effects, adding a dynamic and immersive dimension to the user experience. By utilizing react-parallax-tilt, web applications gain an appealing and interactive edge that captures user attention.
We'll need to install the package the react-parallax-tilt using npm, so make sure that your React application is built before we proceed.
You can see here how to create a React application.
Navigate to the root directory of your React project and install the dependencies using the following commands. We can name the folder as the parallaxReact.
cd parallaxReactnpm i react-parallax-tilt
You have the flexibility to display any Tilt item as long as it resides within its tag. Here's an illustrative instance showcasing the rendering of Educative's logo. Press the "Run" button to see the effects.
import React from 'react';
import ReactDOM from 'react-dom';
import Tilt from 'react-parallax-tilt';
import educativeImage from './download.png'; // Import the image using require or import
const App = () => {
return (
<Tilt tiltMaxAngleX={40} tiltMaxAngleY={40} perspective={1000} scale={1.1} glareEnable={true}>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
<img src={educativeImage} alt="Educative Answers" style={{ height: '200px', width: '600px' }} />
</div>
</Tilt>
);
};
export default App;
ReactDOM.render(<App />, document.getElementById('root'));
Lines 8–12: The Tilt component is provided with several props:
tiltMaxAngleX={25}: Sets the maximum tilt angle in degrees along the X-axis.
tiltMaxAngleY={25}: Sets the maximum tilt angle in degrees along the Y-axis.
perspective={1000}: Sets the perspective (depth) for the tilt effect.
scale={1.1}: Applies a scaling factor to the element during the tilt effect.
glareEnable={true}: Boolean to enable/disable glare effect.
These props customize the behavior of the parallax tilt effect. You can adjust the values of these props to achieve your desired visual effect.
Prop | Type | Description |
| number | Sets the perspective (depth) for the tilt effect. A smaller value creates a more pronounced tilt. |
| number | Applies a scaling factor to the element during the tilt effect. |
| boolean | Enables or disables the glare effect that appears when the element is tilted. |
| boolean | Pre-renders the glare effect, which can improve performance at the cost of memory usage. |
| string | Sets the color of the glare effect. |
| number | Sets the maximum opacity of the glare effect. |
| string | Specifies the easing function for the tilt transition. |
| number | Sets the speed of the tilt transition. |
| string | Specifies the axis of the tilt effect. Can be |
| number | Sets the initial tilt angle in degrees along the X-axis. |
| number | Sets the initial tilt angle in degrees along the Y-axis. |
| boolean | Deprecated. Use |
These additional props provide further control over the parallax tilt effect, allowing you to fine-tune the appearance, behavior, and interactivity of your React components. Feel free to experiment with different combinations of props to achieve the desired visual and user experience.
Free Resources