DEV Community

loading...
Cover image for Awesome animation 🔥🔥 you have never seen it before

Awesome animation 🔥🔥 you have never seen it before

kunaal438 profile image Techy Programmers ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (4)

Collapse
ash_bergs profile image
Ash

Very elegant motion!

Collapse
cristoferk profile image
Collapse
tomasz_frankowski profile image
Tomasz Frankowski

How are the SEO and ARIA with this?

Collapse
luizcostaa profile image
Luiz Guilherme

Awesome!

Forem Open with the Forem app