Design a Letter Hover Effect using HTML CSS and JavaScript

Last Updated : 25 Sep, 2023

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 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 elements wrapped around heading letters. Elements with this class showcase the animation behavior.
JavaScript Code: In this code, elements within the “bouncing-letters” container are targeted. When these elements are hovered over, the bounce() function is triggered, passing the hovered element. bounce() ensures smooth animation. It checks if the 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>