Hello, glad you are here. I am kunaal and today we will see how to make an awesome fully animated header for your web page which you have never seen before. You can see demo below.

Demo

Video Tutorial -

For better explanation. You can watch video tutorial.

If you like the video tutorial. Please consider subscribing my youtube channel.

Let's code

Inside HTML file under <body> tag write

<header class="header">
    <div class="col">
        <div class="content">
            <h1 class="heading">the largest <span>code jam</span></h1>
            <p class="info">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi facilis reiciendis sapiente excepturi unde recusandae officia natus laborum itaque id?</p>
            <button class="btn">register today</button>
            <span class="register-count">9890 in</span>
        </div>
    </div>
    <div class="col">
        <img src="coding.png" class="svg" alt="">
    </div>
</header>

CSS

@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200;300;400;500;600;700;800&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ff6262;
    position: relative;
    perspective: 1000px;
    overflow: hidden;
}

body::before{
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 100vh;
    background: #dc3c3c;
}

.header{
    position: relative;
    width: 20px;
    height: 100vh;
    background: #ff6262;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotateX(180deg);
    animation: rotateX 1s 1s forwards 1, scale 2s 2.2s forwards 1;
}

.header::before{
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: #fff;
    animation: slide-in 1s forwards 1;
}

.header::after{
    content: '';
    position: absolute;
    top: -100%;
    right: 0;
    width: 3px;
    height: 100%;
    background: #fff;
    animation: slide-in 1s forwards 1;
}

@keyframes slide-in{
    99%{
        top: 0;
        opacity: 1;
    }
    100%{
        top: 0;
        opacity: 0;
    }
}

@keyframes rotateX{
    0%{
        transform: rotateX(180deg);
        height: 100vh;
        background-color: #fbfbfb;
    }
    100%{
        transform: rotateX(0deg);
        height: 95%;
        background-color: #fbfbfb;
    }
}

@keyframes scale{
    100%{
        width: 92%;
        border-radius: 10px;
        padding: 0 60px;
        box-shadow: 0 40px 50px rgba(0, 0, 0, 0.25);
    }
}

.col{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    animation: fade-in 1s forwards 1;
    animation-delay: 4s;
}

@keyframes fade-in{
    100%{
        opacity: 1;
    }
}

.svg{
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.heading{
    font-family: 'dosis';
    text-transform: capitalize;
    color: #ff6262;
    font-weight: 600;
    font-size: 50px;
    line-height: 50px;
}

.heading span{
    display: block;
    color: #212121;
    font-size: 120px;
    font-weight: 800;
    line-height: 120px;
}

.info{
    margin: 40px 0;
    font-family: 'roboto', sans-serif;
    text-transform: capitalize;
    font-size: 20px;
    line-height: 30px;
}

.btn{
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 50px;
    border: 2px solid #ff6262;
    text-transform: capitalize;
    color: #ff6262;
    background: none;
    transition: .5s;
    cursor: pointer;
}

.btn:hover{
    background: #ff6262;
    color: #fff;
}

.register-count{
    padding: 10px 20px;
    background: #ffeeee;
    font-family: 'roboto', sans-serif;
    text-transform: capitalize;
    margin-left: 20px;
}

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Source Code, My youtube Channel, Instagram

Blog

Awesome animation 🔥🔥 you have never seen it before

Modern Web

Demo

Video Tutorial -

Let's code

Join Our Newsletter. No Spam, Only the good stuff.

Related