Parallax Text Effects Javascript

Introduction to Parallax Text Effects

Parallax text effects create an illusion of depth by moving elements at different speeds as users interact with the page. This technique enhances visual appeal and improves user engagement.(Source)

How Does Parallax Work?

The background and text move at different speeds.
It creates a 3D-like effect when users move their mouse.
Enhances the interactivity of a webpage.

Why Use Parallax Text Effects?

Parallax effects have several advantages:

✅ Enhances Visual Appeal – Makes your website more modern and engaging.
✅ Improves User Interaction – Encourages visitors to explore the site.
✅ Increases Retention – Users are more likely to stay longer on the page.

How Parallax Text Effects Work in JavaScript?

Detect Mouse Movement – Using JavaScript’s mousemove event.
Calculate Offsets – Adjusting the text based on cursor position.
Apply Transformations – Using translateX() for horizontal movement.

Setting Up the Basic HTML Structure

We start by creating a simple HTML template:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Parallax Text Effects</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<section>
		<div class="skew1">
			<h2 class="layer">Parallax<br>Text</h2>
		</div>
		<div class="textBox">
			<div class="skew2">
				<h2 class="layer">Parallax<br>Text</h2>
			</div>
		</div>
	</section>
	<script src="script.js"></script>
</body>
</html>

The <h2> elements will move based on mouse position.
We link an external CSS file for styling and JavaScript for animation.

Styling the Parallax Text with CSS

Now, let’s style the page with CSS:

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700&display=swap');
*
{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}
section 
{
	position: relative;
	width: 100%;
	height: 100vh;
	background: #222;
	overflow: hidden;
}
.textBox 
{
	position: absolute;
	width: 100%;
	height: 100vh;
	background: #333;
	clip-path: polygon(0 0,50% 0,50% 100%,0% 100%);
}
h2 
{
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 12em;
	color: transparent;
	-webkit-text-stroke: 2px #0876cf;
	cursor: pointer;
}
.textBox h2 
{
	color: #0488f5;
}
.skew1 
{
	position: relative;
	top: 200px;
	transform: skewY(20deg);
}
.skew2 
{
	position: relative;
	top: 200px;
	transform: skewY(-20deg);
}

Key Features of This Styling:

✅ Uses clip-path to create a unique split effect.
✅ Applies skewY() to enhance the dynamic effect.
✅ Uses -webkit-text-stroke for a glowing outline effect.

Implementing the Parallax Effect with JavaScript

Now, we add interactivity using JavaScript:

document.addEventListener('mousemove', parallax);

function parallax(e) {
    document.querySelectorAll('.layer').forEach(layer => {
        let x = (window.innerWidth - e.pageX * 2) / 2;
        layer.style.transform = `translateX(${x}px)`;
    });
}

Explanation of the Code:

mousemove event detects user movement.
querySelectorAll('.layer') selects all parallax text elements.
translateX() moves the text dynamically based on the cursor position.
Making the Parallax Effect Responsive

Handling Different Screen Sizes

To ensure responsiveness, we modify the text size based on screen width:

@media (max-width: 768px) {
	h2 {
		font-size: 6em;
	}
}
@media (max-width: 480px) {
	h2 {
		font-size: 4em;
	}
}

What is the best way to implement parallax text?

Using CSS transformations (transform: translateX()) and JavaScript (mousemove) ensures smooth motion effects.

Does parallax slow down a website?

It can if not optimized properly. Use GPU-accelerated properties (transform, opacity) for better performance.

Can I use parallax effects without JavaScript?

Yes! CSS-only parallax can be achieved using scroll, but JavaScript provides better control.

How do I make parallax animations smoother?

Use requestAnimationFrame() instead of mousemove for better performance.
Reduce the number of moving elements to avoid lag.

Conclusion

The Parallax Text Effect is a powerful way to add motion and depth to your website. With HTML, CSS, and JavaScript, you can create smooth, interactive animations that improve user engagement.

Now, try it out on your next project! 🚀

React is Deprecated: The Bold Future of Web Development
React is Deprecated: What’s Next for Developers? In February 2025, the React team made a significant announcement that has shaken up the web development community. They officially deprecated Create React App (CRA), one of the most popular tools for setting up React applications. But does this mean that React is deprecated? Absolutely not. React remains…
Our Services Box Hover Effects | CSS Cards
Enroll My Course : Next Level CSS Animation and Hover Effects … source
CSS Circular Image Rotate Animation Effects
source
Cursor in & Out Ripple Effects Free Code Download
In today’s digital landscape, user engagement is more important than ever. One way to enhance the user experience on your website is through captivating visual effects. One such effect is the Cursor In & Out Ripple Effects, which adds a dynamic and interactive touch to your web elements. In this blog post, we’ll guide you…
Happy Diwali 2024 HTML CSS JS Design
Diwali, the Festival of Lights, is one of the most celebrated occasions in India and around the world. It’s a time for joy, celebration, and spreading happiness. In this blog post, we’ll explore a simple yet beautiful HTML and CSS design to wish everyone a “Happy Diwali 2024”. We’ll also include a bit of JavaScript…