DEV Community

loading...
Cover image for You have never seen this modern website before.

You have never seen this modern website before.

kunaal438 profile image Techy Programmers ・4 min read

Demo

I suggest you so see this effect in new window mode. And yeah its not responsive but you can make it. Click on the top right most button to view this in new window mode.

Video Tutorial : )

Let's have a look how to code this

To create this website animation we use HTML, CSS, and few lines of Javascript so let's get started.

First make a file index.html and write HTML basic structure.
Now in body tag we will create a div and give it a class mail. And inside of that mail div we make two span. And give them class. Like this

<div class="mail">
        <span class="line"></span>
        <span class="line two"></span>
</div>
Enter fullscreen mode Exit fullscreen mode

now let's add some style to it. Make style.css and link it to the index.html file. And give some styling.

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

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

.mail{
    width: 200px;
    height: 120px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    clip-path: polygon(52% 48%, 100% 0, 100% 100%, 0 100%, 0 0);
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.line{
    position: absolute;
    width: 0%;
    height: 5px;
    background: #000;
    top: 100%;
    left: 0%;
    transform-origin: left;
    transform: rotate(-31deg);
    animation: grow-line-one 1s forwards 1;
}

@keyframes grow-line-one{
    0%{
        width: 0;
    }
    100%{
        width: 120%;
    }
}

.line.two{
    width: 0%;
    animation: none;
    top: -1%;
    left: -1%;
    transform: rotate(29deg);
    animation: grow-line-two .5s forwards 1;
    animation-delay: 1s;
}

@keyframes grow-line-two{
    0%{
        width: 0;
    }
    100%{
        width: 60%;
    }
}
Enter fullscreen mode Exit fullscreen mode

So the styles above is just making our .mail div in center and giving its dimensions 200 X 120 with background color white. And we also style our .line make first span of width 120% and rotating that from bottom-left to top-right and we did same with other span but different width.
We also gave animation here where we made our spans initial width equal to 0 and with animation and animation-delay we are setting their width.

Now we have to create our mails lid that will open. So go into your index.html file and now make a span above your .mail div and class it .lid and make another span with class .mail-backside. the structure should look like this.

<span class="lid"></span>
<span class="mail-backside"></span>
Enter fullscreen mode Exit fullscreen mode

Now style this

.lid,
.mail-backside{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 120px;
    background: #000;
    transform-origin: top;
    background: #fff;
    z-index: 3;
    clip-path: polygon(52% 48%, 100% 0, 0 0);
    transition: 1s;
    animation: open-lid 1s 1.5s forwards 1;
}

.mail-backside{
    z-index: -1;
    animation: none;
    background: rgb(223, 223, 223);
}

@keyframes open-lid{
    0%{
        transform: translate(-50%, -50%) rotateX(0);
        background: #fff;
    }
    100%{
        transform: translate(-50%, -50%) rotateX(-180deg);
        background: rgb(180, 180, 180);
    }
}
Enter fullscreen mode Exit fullscreen mode

After this we are done almost. we just made our lid opening animation.

Now lets make our header

For header create a <header> between our .lid and .mail element inside <header> create a div of class .content and inside of that make an h1 and p and give its content as you like.

<header class="header">
      <div class="content">
            <h1 class="heading">amazing web <br>animation</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, iste placeat provident minima obcaecati facere rerum omnis quae illum, deserunt aliquam fuga vitae quibusdam! Nobis repellat tempore voluptatum ipsam itaque!</p>
      </div>
</header>
Enter fullscreen mode Exit fullscreen mode

Before styling these we have to make an animation for our .mail and .lid element to get them down. For that write

@keyframes drop-down{
    0%{
        top: 50%;
        opacity: 1;
    }
    100%{
        top: 100%;
        opacity: 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

And then make a file app.js and link that to index.html. Write this in app.js.

const mail = document.querySelector('.mail');
const lid = document.querySelector('.lid');
const mailBack = document.querySelector('.mail-backside');

setTimeout(() => {
    mail.style.animation = `drop-down 1s forwards 1`;
    lid.style.top = `100%`;
    lid.style.opacity = 0;
    mailBack.style.animation = `drop-down 1s forwards 1`;
}, 2500);
Enter fullscreen mode Exit fullscreen mode

so what we did in this js is that we select our .mail, .lid, .mail-backside elements and give them animation to go down out off the screen after 2500ms.

Now its time to style our header. So write this.

.header{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.14);
    background: url('bg.png');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: roboto, sans-serif;
    animation: scale-up 1s 3.2s forwards 1;
}

@keyframes scale-up{
    0%{
        transform: translate(-50%, -50%) scale(0.14);
    }
    100%{
        transform: translate(-50%, -50%) scale(1);
    }
}

.content{
    width: 60%;
    text-align: center;
    color: #fff;
    opacity: 0;
    animation: fade-in 1s 4.2s forwards 1;
}

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

.heading{
    font-size: 100px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 50px;
}

.content p{
    font-size: 20px;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

And Now its done. We made this awesome looking animation. I hope you understand each and everything. If you find any mistake I made feel free to tell me out in the comments.

Discussion (2)

pic
Editor guide
Collapse
davwheat profile image
David Wheatley

You should consider using the prefers-reduced-motion media query to reduce some of those animations (mainly the zooms).

Adding role="presentation" might also be a good idea to prevent some accessibility tools reading out the names of elements.

Collapse
magicd profile image
MagicD

Fun intro animation indeed!
Yet I can't shake the feeling that you are missing a "skip intro" button like in the good ol' Flash intro days ;)