Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create a Parallax Effect using HTML, CSS, and JavaScript?
In this article, we are going to learn about parallax effects and how to create them using HTML, CSS, and JavaScript. We will be using the mouse-move event to show the parallax effect. During the parallax effect, two different images move in parallel to each other. Both the images will be working parallel and making the same transitions. The only difference will be they move in the opposite directions.
Parallax effects are used for making websites better in terms of User Experience and enhancing the interactivity level of the website. We can move the foreground and the background images at different speeds in different directions. There can be multiple combinations of the parallax effect like moving a text with an image or an image with an image.
How Parallax Effect Works
The parallax effect relies on capturing mouse movement and translating those coordinates into different movement speeds for various elements. Elements with higher "value" attributes move faster, creating depth perception.
Complete Example
In the below example, we have a Parallax Effect using two images. Both the images move in opposite directions with the same speed.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: lightgrey;
}
.mouse_move {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.mouse_move h2 {
position: relative;
font-size: 40px;
color: black;
}
.mouse_move img {
position: absolute;
}
#img1 {
top: 80px;
left: 80px;
height: 250px;
width: 250px;
}
#img2 {
bottom: 80px;
right: 80px;
height: 250px;
width: 250px;
}
</style>
<title>Parallax Effect</title>
</head>
<body>
<div class="mouse_move">
<img
id="img1"
src="https://www.tutorialspoint.com/assets/questions/media/64678/5.png"
class="mouse"
value="7"/>
<h2>Welcome To Tutorials Point</h2>
<img
id="img2" src="https://www.tutorialspoint.com/images/logo.png" class="mouse" value="-7"/>
</div>
<script type="text/javascript">
document.addEventListener("mousemove", parallax);
function parallax(event) {
this.querySelectorAll(".mouse").forEach((shift) => {
const position = shift.getAttribute("value");
const x = (window.innerWidth - event.pageX * position) / 90;
const y = (window.innerHeight - event.pageY * position) / 90;
shift.style.transform = `translateX(${x}px) translateY(${y}px)`;
});
}
</script>
</body>
</html>
How the JavaScript Works
The JavaScript code captures mouse movements and applies transformations to elements with the "mouse" class:
// Listen for mouse movement across the entire document
document.addEventListener("mousemove", parallax);
function parallax(event) {
// Find all elements with class "mouse"
this.querySelectorAll(".mouse").forEach((shift) => {
// Get the movement speed/direction from value attribute
const position = shift.getAttribute("value");
// Calculate X and Y offset based on mouse position
const x = (window.innerWidth - event.pageX * position) / 90;
const y = (window.innerHeight - event.pageY * position) / 90;
// Apply transformation
shift.style.transform = `translateX(${x}px) translateY(${y}px)`;
});
}
Key Points
- Value Attribute: Controls movement speed and direction. Positive values move one way, negative values move opposite.
- Division by 90: Reduces movement sensitivity to create smooth motion.
- Transform Property: Uses CSS transforms for smooth animations.
- Event Delegation: Single event listener handles multiple elements efficiently.
Customization Options
You can customize the parallax effect by:
- Changing the
valueattribute to adjust movement speed - Modifying the division factor (90) to increase or decrease sensitivity
- Adding more elements with different values for multi-layer effects
- Using different CSS transforms like rotation or scaling
Output
Conclusion
Parallax effects create engaging user experiences by making elements respond to mouse movement. The key is using different movement speeds for various elements to simulate depth and create visual interest.
1K+ Views
