Social Media Icons Using HTML, CSS jQuery

Social Media Icons Using HTML, CSS jQuery

how to create an interactive Social Media Counter UI with engaging animations. Using HTML, CSS, and jQuery, it dynamically displays social media stats like Likes, Messages, Shares, and Subscribers. The Counter-Up plugin ensures smooth counting animations, making the design visually appealing and user-friendly. Each counter icon represents a social platform with customizable colors and styles. The CSS handles responsive and modern styling, while jQuery ensures functionality and transitions. This design is perfect for showcasing real-time stats on websites or blogs effectively 

his code snippet creates an interactive Social Media Counter UI to display dynamic statistics for platforms like Facebook, Instagram, GitHub, and YouTube. Each counter is styled with vibrant colors and uses font icons to represent the respective social media platforms visually. The counters include animations that increment numbers, giving an engaging and professional look to your website. With a responsive layout, it adapts seamlessly to various screen sizes. The integration of the Counter-Up plugin ensures smooth number transitions, making it perfect for dashboards or portfolio pages. Enhance your web presence with this visually appealing and easy-to-implement design

HTML CODE

  <div class="container">
        <div class="icon fb" style="color: #4867AA;">
            <span class="fab fa-facebook-square"></span>
            <div class="counter">
                <div class="numb">1000</div>
                <span class="plus">+</span>
            </div>
            <div class="text">Likes</div>
        </div>
    
        <div class="icon insta" style="color: #E1306C;">
            <span class="fab fa-instagram-square"></span>
            <div class="counter">
                <div class="numb">500</div>
                <span class="plus">+</span>
            </div>
            <div class="text">Messages</div>
        </div>
    
        <div class="icon github" style="color: #444;">
            <span class="fab fa-github-square"></span>
            <div class="counter">
                <div class="numb">100</div>
                <span class="plus">+</span>
            </div>
            <div class="text">Shares</div>
        </div>
    
        <div class="icon yt" style="color: #FF0000;">
            <span class="fab fa-youtube-square"></span>
            <div class="counter">
                <div class="numb">3000</div>
                <span class="plus">+</span>
            </div>
            <div class="text">Subscribers</div>
        </div>
    </div>

CSS code styles a Social Media Counter UI to create a clean and responsive layout. The .container uses a flexbox design for a center-aligned structure with wrapped icons, ensuring adaptability for different screen sizes. Each .icon represents a social platform, styled with a clickable appearance, custom dimensions, and modern fonts. The .counter class displays dynamic numbers with a sleek combination of fonts and a white background. The .text class is animated to smoothly transition into view, adding an engaging user experience. Transitions and opacity effects enhance the interactivity, ensuring the design is both functional and visually appealing. This code is ideal for showcasing stats in an elegant and professional manner.

CSS CODE

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.icon {
    width: 130px;
    margin: 0 5px;
    cursor: pointer;
    font-size: 55px;
}
.icon .counter {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 0;
}
.counter .numb, .counter .plus {
    font-size: 25px;
    font-weight: 600;
    font-family: sans-serif;
    background: white;
}
.counter .plus {
    padding: 0 2px;
}
.icon .text {
    font-size: 20px;
    font-weight: 600;
    margin-top: -30px;
    opacity: 0;
    z-index: -1;
    transition: margin-top 0.4s, opacity 0.4s, z-index 0.4s;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.icon .text.show {
    margin-top: -5px;
    opacity: 1;
    z-index: 1;
}

jQuery script enhances the functionality of a Social Media Counter UI by incorporating smooth counting animations. The counterUp plugin is initialized on the .numb class, enabling the counters to increment dynamically with a customizable delay and duration (delay: 20ms, time: 1000ms). After the animation completes, a setTimeout function adds the show class to the .text elements, making them visible with a fade-in effect. This combination of animations ensures an engaging and interactive user experience. The script is compact, efficient, and designed to work seamlessly with the Counter-Up library, making it ideal for adding visual appeal to websites and blogs

JQuery CODE

$(document).ready(function() {
    // Ensure the counterUp plugin is applied
    $('.icon .counter .numb').counterUp({
        delay: 20, 
        time: 1000 
    });

    // Add the "show" class after counter animation completes
    setTimeout(function() {
        $('.icon .text').addClass("show");
    }, 1000); 
});

Conclusion

script effectively combines jQuery and the Counter-Up plugin to create a visually dynamic and interactive Social Media Counter UI. The use of animations and timed transitions enhances user engagement, making it perfect for modern web designs. Its lightweight and efficient implementation ensure seamless integration into any project. By leveraging these features, developers can elevate their websites with visually appealing and professional stat displays.