Close Menu

    Subscribe to Updates

    Get the latest creative news from FooBar about art, design and business.

    What's Hot

    How to create Headphone Animation using HTML CSS and JS

    1 July 2025

    How to create Netflix Intro Animation using HTML and CSS

    29 June 2025

    How to create Order Confirm Animation using HTML CSS and JS

    27 June 2025
    Facebook X (Twitter) Instagram YouTube Telegram Threads
    Coding StellaCoding Stella
    • Home
    • Blog
    • HTML & CSS
      • Login Form
    • JavaScript
    • Hire us!
    Coding StellaCoding Stella
    Home - JavaScript - How to create Headphone Animation using HTML CSS and JS
    JavaScript

    How to create Headphone Animation using HTML CSS and JS

    Coding StellaBy Coding Stella1 July 2025No Comments7 Mins Read
    Share Facebook Twitter Pinterest LinkedIn Tumblr Reddit Email WhatsApp Copy Link

    Let’s create a Headphone Animation using HTML, CSS, and JavaScript! 🎧✨ This project will feature stylish headphones with smooth animations that respond to user interaction or load automatically.

    We’ll use:

    • HTML to build the headphone structure.
    • CSS to design and animate parts like wires, speakers, and pulses.
    • JavaScript to trigger animations or sound-like effects when interacting.

    This project is great for anyone looking to improve their front-end animation skills and add a modern, tech-inspired element to their portfolio or landing page.

    HTML :

    This HTML code creates a stylish headphone product showcase page with a logo, heading, product description, price, social icons, and a set of headphone images in different colors. Each headphone image corresponds to a matching animated radial gradient background, likely controlled by JavaScript for smooth transitions, giving users an engaging visual experience when viewing the product.

    <!DOCTYPE html>
    <html lang="en" >
    <head>
      <meta charset="UTF-8">
      <title>Headphone Background Animation | @coding.stella</title>
      <link rel="stylesheet" href="./style.css">
    
    </head>
    <body>
    
    <body>
    
    <section class="slider-main">
        <div class="container">
            <div class="logo">
                <a href="#"><img src="/Images/logo.svg" alt="logo"></a>
            </div>
            <div class="slider-content-wrap">
                <div class="slider-content">
                    <h2 class="heading-style-2">Apple AirPods Max Wireless Over-Ear Headphones.</h2>
                    <p>Active Noise Cancelling, Transparency Mode, Spatial Audio, Digital Crown for Volume Control. Bluetooth Headphones for iPhone</p>
                    <h3 class="heading-style-2">$779.99</h3>
                    <div class="social-icons">
                        <a href="#"><img src="/Images/instagram.svg" alt="instagram"></a>
                        <a href="#"><img src="/Images/facebook.svg" alt="facebook"></a>
                        <a href="#"><img src="/Images/twitter.svg" alt="twitter"></a>
                    </div>
                </div>
            </div>
        </div>
    
        <div class="slider-images">
            <img class="slider-image" src="/Images/green.png" alt="headphone image">
            <img class="slider-image" src="/Images/blue.png" alt="headphone image">
            <img class="slider-image" src="/Images/red.png" alt="headphone image">
            <img class="slider-image" src="/Images/white.png" alt="headphone image">
            <img class="slider-image" src="/Images/black.png" alt="headphone image">
        </div>
    
        <div id="backgrounds">
            <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #C7F6D0 0%, #7CB686 92.19%);"></div>
            <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #D1E4F6 0%, #5F9CCF 100%);"></div>
            <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #FFB7B2 0%, #ED746E 100%);"></div>
            <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #D7D7D7 0%, #979797 100%);"></div>
            <div class="background" style="background: radial-gradient(50% 50% at 50% 50%, #6B6B6B 0%, #292929 100%);"></div>
        </div>
    </section>
    
    </body>
    
      <script  src="./script.js"></script>
    
    </body>
    </html>
    

    CSS :

    This CSS file styles a headphone product showcase with a responsive and animated layout. It defines a clean, modern look using the Montserrat font, sets up a split layout with product info on one side and headphone images on the other, and creates smooth image transitions using blur and opacity for animation. Backgrounds are layered behind the content using gradients, and social icons are neatly styled. Media queries ensure the layout adapts well across all screen sizes from desktop to mobile, keeping the design visually appealing and functional.

    @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&display=swap");
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html {
      overflow-x: hidden;
    }
    img {
      user-select: none;
    }
    body {
      overflow-x: hidden;
      position: relative;
      font-family: "Montserrat", sans-serif;
      height: 100svh;
    }
    a {
      display: inline-block;
    }
    .heading-style-2 {
      color: #fff;
      font-size: 50px;
      font-weight: 900;
      line-height: 50px;
      margin-bottom: 40px;
    }
    p {
      color: #fff;
      font-family: Montserrat;
      font-size: 18px;
      font-style: normal;
      font-weight: 400;
      line-height: 35px;
      margin-bottom: 28px;
    }
    
    /* logo */
    .logo a {
      margin-bottom: 20px;
    }
    .logo a img {
      width: 271px;
      height: auto;
    }
    .slider-main {
      min-height: 700px;
      background: radial-gradient(50% 50% at 50% 50%, #c7f6d0 0%, #7cb686 92.19%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }
    #backgrounds {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      z-index: -1;
    }
    .background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: opacity 2s ease-in-out;
    }
    .container {
      position: relative;
      left: calc(50% - (1140px / 2));
      width: 50%;
      padding-block: 100px;
      max-width: 525px;
      height: 100%;
    }
    
    /* content */
    .slider-content-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
    }
    /* social media */
    .social-icons {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .social-icons a {
      border: 2px solid #fff;
      border-radius: 50%;
      width: 45px;
      height: 45px;
      display: inline-block;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .social-icons img {
      width: 22px;
      height: 22px;
    }
    
    /* images */
    .slider-images > img.next {
      opacity: 1;
      transition: 2s;
      filter: blur(35px);
      left: 100%;
      top: 10%;
      transform: translate(-50%, -50%) scale(0.3);
    }
    .slider-images > img.active {
      opacity: 1;
      transform: scale(1);
      transition: 2s;
      filter: blur(0px);
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 1;
    }
    .slider-images > img.previous {
      opacity: 1;
      transition: 2s;
      filter: blur(25px);
      left: 95%;
      top: 90%;
    }
    .slider-images > img.inactive {
      opacity: 0;
      transition: 2s;
      filter: blur(35px);
      left: 100%;
      top: 100%;
      transform: translate(10%, 10%) scale(0.3);
    }
    .slider-images {
      position: relative;
      width: 50%;
      height: 100%;
      top: 0;
    }
    .slider-images > img {
      position: absolute;
      top: 0%;
      left: 100%;
      filter: blur(25px);
      transform: translate(-50%, -50%) scale(0.3);
      transition: opacity 3s;
      object-fit: cover;
      max-width: 593px;
      max-height: 779px;
      height: 100%;
      min-height: 320px;
    }
    
    /* ========================= media query ============================== */
    @media screen and (max-width: 1199px) {
      .logo a img {
        width: 230px;
      }
      .heading-style-2 {
        font-size: 40px;
        line-height: 45px;
        margin-bottom: 30px;
      }
      p {
        font-size: 17px;
        line-height: 28px;
        margin-bottom: 22px;
      }
      .container {
        left: calc(50% - (920px / 2));
        padding-block: 80px;
        max-width: 475px;
      }
      .slider-images > img {
        width: 453px;
        height: auto;
        aspect-ratio: 1/1.3;
      }
    }
    @media screen and (max-width: 991px) {
      .logo a img {
        width: 210px;
      }
      .heading-style-2 {
        font-size: 35px;
        line-height: 43px;
        margin-bottom: 22px;
      }
      p {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 18px;
      }
      .container {
        left: calc(50% - (720px / 2));
        padding-block: 70px;
        max-width: 405px;
      }
      .slider-images {
        width: 45%;
      }
      .slider-images > img {
        width: 340px;
        aspect-ratio: 1/1.3;
      }
    }
    @media screen and (max-width: 767px) {
      .logo a img {
        width: 200px;
      }
      .logo a {
        margin-bottom: 20px;
      }
      .slider-main {
        flex-direction: column;
        min-height: 900px;
      }
      .social-icons a {
        width: 35px;
        height: 35px;
      }
      .social-icons img {
        width: 16px;
        height: 16px;
      }
      .container {
        position: unset;
        padding-block: 70px;
        max-width: 540px;
        width: 100%;
      }
      .slider-images {
        width: 100%;
      }
      .slider-images > img {
        height: 380px;
        aspect-ratio: 1/1.3;
        width: auto;
      }
      .slider-images > img.active {
        top: 45%;
        left: 20%;
      }
    }
    @media screen and (max-width: 575px) {
      .logo a img {
        width: 180px;
      }
      .logo a {
        margin-bottom: 18px;
      }
      .heading-style-2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 20px;
      }
      p {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 16px;
      }
      .social-icons a {
        width: 32px;
        height: 32px;
      }
      .social-icons img {
        width: 15px;
        height: 15px;
      }
      .container {
        padding: 50px 20px 50px 20px;
        max-width: 100%;
      }
      .slider-images > img {
        height: 100px;
      }
      .slider-images > img.active {
        top: 50%;
        left: 5%;
      }
      .slider-images > img.previous {
        top: 100%;
      }
    }
    

    JavaScript:

    This JavaScript code powers the headphone slider animation by cycling through images and background gradients every 3 seconds. It assigns classes like active, next, previous, and inactive to each image for visual effects (like blur and transitions), and fades in the matching background using opacity. The slider loops infinitely by updating the imageIndex, ensuring smooth automatic transitions between the headphone colors and their background styles.

    var backgrounds = document.querySelectorAll('.background');
    
    const slider = document.querySelector('.slider-images');
    const images = Array.from(slider.children);
    
    let imageIndex = 0;
    
    function updateSlider() {
        images.forEach(image => {
            image.classList.remove('active', 'previous', 'next', 'inactive');
        });
    
        images[imageIndex].classList.add('active');
    
        if (imageIndex - 1 >= 0) {
            images[imageIndex - 1].classList.add('previous');
        } else {
            images[images.length - 1].classList.add('previous');
        }
    
        if (imageIndex + 1 < images.length) {
            images[imageIndex + 1].classList.add('next');
        } else {
            images[0].classList.add('next');
        }
    
        images.forEach((image, index) => {
            if (index !== imageIndex && index !== (imageIndex - 1 + images.length) % images.length && index !== (imageIndex + 1) % images.length) {
                image.classList.add('inactive');
            }
        });
    
        backgrounds.forEach((background) => {
            background.style.opacity = 0;
        });
        if (images[imageIndex].classList.contains('active')) {
            backgrounds[imageIndex].style.opacity = 1;
        }
        imageIndex = (imageIndex + 1) % images.length;
    }
    updateSlider();
    
    setInterval(updateSlider, 3000);
    
    images[1].classList.add('next');
    images[2].classList.add('inactive');
    images[3].classList.add('inactive');
    images[4].classList.add('previous');
    images[0].classList.add('active');

    In conclusion, building a Headphone Animation with HTML, CSS, and JavaScript is a fun and creative way to learn motion effects and UI interaction. It’s perfect for music-related websites or just to sharpen your animation skills. Let’s keep coding and creating cool experiences! 🎶💻

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Animation Button JavaScript order button Web Development
    Share. Copy Link Twitter Facebook LinkedIn Email WhatsApp
    Previous ArticleHow to create Netflix Intro Animation using HTML and CSS
    Coding Stella
    • Website

    Related Posts

    HTML & CSS

    How to create Netflix Intro Animation using HTML and CSS

    29 June 2025
    JavaScript

    How to create Order Confirm Animation using HTML CSS and JS

    27 June 2025
    HTML & CSS

    How to create Social media popup hover menu using HTML and CSS

    25 June 2025
    Add A Comment
    Leave A Reply Cancel Reply

    Trending Post

    Master Frontend in 100 Days Ebook

    2 March 202420K Views

    How to make Modern Login Form using HTML & CSS | Glassmorphism

    11 January 202418K Views

    How to make I love you Animation in HTML CSS & JavaScript

    14 February 202416K Views

    How to make Valentine’s Day Card using HTML & CSS

    13 February 202412K Views
    Follow Us
    • Instagram
    • Facebook
    • YouTube
    • Twitter
    ads
    Featured Post

    How to make Team Profiles Rotation using HTML & CSS

    2 August 2024

    Is it Good to be a Full Stack Developer?

    24 January 2024

    Mastering Web Development: Your Ultimate Roadmap to Success

    31 January 2024

    How to make Responsive GSAP Slider with Button Wave Effect using HTML CSS & JavaScript

    2 May 2024
    Latest Post

    How to create Headphone Animation using HTML CSS and JS

    1 July 2025

    How to create Netflix Intro Animation using HTML and CSS

    29 June 2025

    How to create Order Confirm Animation using HTML CSS and JS

    27 June 2025

    How to create Social media popup hover menu using HTML and CSS

    25 June 2025
    Facebook X (Twitter) Instagram YouTube
    • About Us
    • Privacy Policy
    • Return and Refund Policy
    • Terms and Conditions
    • Contact Us
    • Buy me a coffee
    © 2025 Coding Stella. Made with 💙 by @coding.stella

    Type above and press Enter to search. Press Esc to cancel.

    Ad Blocker Enabled!
    Ad Blocker Enabled!
    Looks like you're using an ad blocker. We rely on advertising to help fund our site.
    Okay! I understood