An Animated Hero Section with HTML, CSS and JS

Dive into the world of web development of creativity as we explore the art of creating an Animated Hero Section with HTML, CSS, and JS. In this tutorial, we are achieving this simple and creative hero section. A captivating hero section is the best way to attract the user to your website. The hero section plays a great role in attracting a user. So, are you ready to revolutionize your website’s first impression?

Key Features:

Using straightforward HTML and CSS
Completely responsive
Eye-catchy color
Modern looking
Premium feel
Animated
Smooth animations

Journey of web development simplicity with our tutorial on An Animated Hero Section with HTML, CSS and JS. There are complete source code available. You can copy the code also download it as well.

SOURCE CODE:

HTML:

HTML

<!DOCTYPE html>
<html lang="en">
<!-- coded by : cybercript.in --> 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Headphone Slider - Cyber Cript</title>
</head>
<!-- coded by : cybercript.in --> 

<body>
    <section class="slider-main">
        <div class="container">
            <div class="logo">
                <a href="#"><img src="https://www.yudiz.com/codepen/headphone-slider/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="https://www.yudiz.com/codepen/headphone-slider/instagram-icon.svg"
                                alt="instagram"></a>
                        <a href="#"><img src="https://www.yudiz.com/codepen/headphone-slider/facbook-icon.svg"
                                alt="facebook"></a>
                        <a href="#"><img src="https://www.yudiz.com/codepen/headphone-slider/twiter-icon.svg"
                                alt="twitter"></a>
                    </div>
                </div>
            </div>
        </div>
<!-- coded by : cybercript.in --> 

        <div class="slider-images">
            <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/green.png"
                alt="headphone image">
            <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/blue.png"
                alt="headphone image">
            <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/red.png"
                alt="headphone image">
            <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/white.png"
                alt="headphone image">
            <img class="slider-image" src="https://www.yudiz.com/codepen/headphone-slider/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>
<!-- coded by : cybercript.in --> 

    <script src="js/main.js"></script>
</body>

</html>

CSS:

CSS

/* // <!-- coded by : cybercript.in -->  */

@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 */
/* // <!-- coded by : cybercript.in -->  */

.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);
}

/* // <!-- coded by : cybercript.in -->  */

.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);
}
/* // <!-- coded by : cybercript.in -->  */

.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;
}
/* // <!-- coded by : cybercript.in -->  */

/* ========================= 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%;
    }
}
/* // <!-- coded by : cybercript.in -->  */

JAVASCRIPT:

JavaScript

// Get all the background divs
// <!-- coded by : cybercript.in --> 

var backgrounds = document.querySelectorAll('.background');
// Get the slider and the images
const slider = document.querySelector('.slider-images');
const images = Array.from(slider.children);

// Set the initial image index
let imageIndex = 0;

// Update the slider
// <!-- coded by : cybercript.in --> 

function updateSlider() {
    // Remove the 'active', 'previous', 'next', and 'inactive' classes from all images
    images.forEach(image => {
        image.classList.remove('active', 'previous', 'next', 'inactive');
    });

    // Add the 'active' class to the current image
    images[imageIndex].classList.add('active');

    // Add the 'previous' class to the image before the current one
    if (imageIndex - 1 >= 0) {
        images[imageIndex - 1].classList.add('previous');
    } else {
        images[images.length - 1].classList.add('previous');
    }

    // Add the 'next' class to the image after the current one
    if (imageIndex + 1 < images.length) {
        images[imageIndex + 1].classList.add('next');
    } else {
        images[0].classList.add('next');
    }

    // Add the 'inactive' class to the other images
// <!-- coded by : cybercript.in --> 

    images.forEach((image, index) => {
        if (index !== imageIndex && index !== (imageIndex - 1 + images.length) % images.length && index !== (imageIndex + 1) % images.length) {
            image.classList.add('inactive');
        }
    });

    // Set the opacity of all the background divs to 0
    backgrounds.forEach((background) => {
        background.style.opacity = 0;
    });
    // If the current image is active, set the opacity of the corresponding background div to 1
    if (images[imageIndex].classList.contains('active')) {
        backgrounds[imageIndex].style.opacity = 1;
    }
    // Update the image index
    imageIndex = (imageIndex + 1) % images.length;
}
updateSlider();
// Update the slider every 3 seconds
// <!-- coded by : cybercript.in --> 

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');
// <!-- coded by : cybercript.in -->

Hacker Themed Login Page Design with HTML & CSS

In the world of cyberspace, we embark on the creation of an eye-catching Hacker Themed Login Page Design with HTML & CSS.

Download Source Code:

4 KB

Conclusion:

And there you go – An Animated Hero Section with HTML, CSS and JS. You can modify the styles, extend them with new features, or use them in your projects to provide stylish visuals for the users. With a blend of sleek aesthetics and technical prowess, your projects can make a lasting impression. Start your journey into the web dev.

Post Views: 16,795

Finite number of lines code and infinite possibilities

Programmer, Arpan Bera