In this article, we will learn to implement the bouncing letter hover effect using simple HTML, CSS, and JavaScript. HTML is used to create the structure of the page, CSS is used to set the styling and JavaScript is used for animation.
Approach to Create the Bouncing Letter Hover Effect
- HTML Code: To achieve a dynamic bouncing text effect, start by enclosing each letter of a <h1> heading in <span> tags. This letter-level control, combined with CSS and JavaScript, results in an engaging bounce animation, perfect for grabbing attention in headers, banners, and other emphasized text.
- CSS Code: The .bounce class selector applies the “bounce” keyframes animation to an HTML element, specifically to <span> elements wrapped around heading letters. Elements with this class showcase the animation behavior.
- JavaScript Code: In this code, <span> elements within the “bouncing-letters” container are targeted. When these <span> elements are hovered over, the bounce() function is triggered, passing the hovered element. bounce() ensures smooth animation. It checks if the <span> doesn’t have the “bounce” class to avoid repeated animations. If not present, it adds the “bounce” class for the CSS animation. Using setTimeout(), the class is removed after 1 second, restoring the element to its original state.
Example: This example shows the implementation of the above approach.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Bouncing Letter Hover Effect </title> <style> body { background-color: rgba(175, 224, 175, 255); } h1 { font-family: sans-serif; font-size: 110px; text-align: center; color: #318D45; margin-top: 250px; } .bounce { animation-name: bounce; } .bouncing-letters span { animation-timing-function: linear; animation-duration: 1s; animation-iteration-count: 1; display: inline-block; } .bouncing-letters span:hover { color: whitesmoke; } @keyframes bounce { 20%, 50%, 80%, to { transform: scale(1, 1); } 40% { transform: scale(1.75, 0.65); } 45% { transform: scale(1.75, 0.65); } 70% { transform: scale(1.25, 0.75); } 90% { transform: scale(1.15, 0.85); } } </style> </head> <body> <h1 class="bouncing-letters" style="letter-spacing:0.3px;"> <span>G</span> <span>e</span> <span>e</span> <span>k</span> <span>s</span> <span>F</span> <span>o</span> <span>r</span> <span>G</span> <span>e</span> <span>e</span> <span>k</span> <span>s</span> </h1> <script> document.querySelectorAll(".bouncing-letters>span") .forEach((element) => { element.addEventListener("mouseover", (e) => bounce(e.target)); }); function bounce(letter) { if (!letter.classList.contains("bounce")) { letter.classList.add("bounce"); setTimeout( function () { letter.classList.remove("bounce"); }, 1000 ); } } </script> </body> </html> |
Output:
Output
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
