Introduction
Web design constantly evolves, and adding interactive effects can significantly enhance the user experience. One such visually stunning effect is the “Text Smoke Effect on Hover,” which gives the illusion of text transforming into smoke when hovered over. This effect is simple to create using basic HTML, CSS, and JavaScript. This blog will walk you through seven easy steps to create this effect.
Youtube Video Link – https://youtu.be/OJbpuVIo1l8
Step 1: Setting Up the HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Smoke Effect on Hover With HTML, CSS & JS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<p class="smalltext">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis doloribus sint...
</p>
</section>
</body>
</html>In this structure, the <section> tag contains a paragraph (<p> element) with the class smalltext. This paragraph is where the effect will be applied. The meta tags ensure the webpage is responsive, and the title describes the effect.
Step 2: Styling the Text with CSS
Next, let’s move on to the CSS part, where the real magic begins. Here, you will style the text and add the necessary effects:
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
section {
position: relative;
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #000;
}
section .smalltext {
color: #fff;
font-size: 20px;
line-height: 30px;
max-width: 900px;
user-select: none;
}Here, we’re importing the “Roboto” font and applying a clean, minimal design. The body takes on a black background (background: #000), and the text is white (color: #fff). The user-select: none; property ensures that users cannot select the text, enhancing the effect’s interactivity.
Step 3: Adding the Smoke Animation
Now comes the fun part—creating the actual smoke effect with a @keyframes animation:
section .smalltext span.active {
animation: smoke 2s linear forwards;
transform-origin: bottom;
}
@keyframes smoke {
0% {
opacity: 1;
filter: blur(0);
transform: translateX(0) translateY(0) rotate(0deg);
}
100% {
opacity: 0;
filter: blur(20px);
transform: translateX(200px) translateY(-200px) rotate(720deg) scale(3);
}
}This animation causes the text to gradually disappear in a “smoke-like” fashion when hovered. At the 0% mark, the text is fully visible, and by, the text has blurred, rotated, and moved, mimicking the movement of smoke.
Step 4: Adding JavaScript to Split the Text
To apply the effect to each letter individually, you’ll use JavaScript to break the text into individual characters and wrap each character in a <span> tag:
const smalltext = document.querySelector('.smalltext');
smalltext.innerHTML = smalltext.textContent.replace(/\S/g, "<span>$&</span>");This script selects the text inside the .smalltext class and wraps each character in a <span>. This allows us to manipulate each letter independently.
Step 5: Triggering the Smoke Effect on Hover
Next, we need to trigger the effect when the user hovers over the letters. You can achieve this by adding an event listener:
const letters = document.querySelectorAll('span');
letters.forEach(letter => {
letter.addEventListener('mouseover', function() {
letter.classList.add('active');
});
});When a user hovers over any letter, the active class is added, triggering the smoke animation defined in CSS.
Step 6: Final Touches
After adding the JavaScript and CSS, the effect will be complete. You can further tweak it by adjusting the animation duration, the transform properties, or even adding more complex keyframes for advanced effects.
Step 7: Conclusion
The “Text Smoke Effect on Hover” is an excellent way to enhance the user experience with minimal code. By using HTML for structure, CSS for styling and animation, and JavaScript for interactivity, you can create visually stunning effects that captivate your audience.
We hope you find this article helpful. Feel free to explore our other posts on Mechcoders Blogs.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Linkedin and Facebook.
