You have never seen this modern website before.
Tags: uiweekly, ux, webdev, css
Published: 2021-05-04 14:57:40

#Demo

{% codesandbox ecstatic-torvalds-ocj66 %}

>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 : )

{% youtube FyMXOq1Jyuo %}

## 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

```HTML
<div class="mail">
        <span class="line"></span>
        <span class="line two"></span>
</div>
```

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

```css
*{
    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%;
    }
}
```
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.

```HTML
<span class="lid"></span>
<span class="mail-backside"></span>
```

Now style this

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

```html
<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>
```

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

```CSS
@keyframes drop-down{
    0%{
        top: 50%;
        opacity: 1;
    }
    100%{
        top: 100%;
        opacity: 0;
    }
}
```
And then make a file `app.js` and link that to `index.html`. Write this in `app.js`.
```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);
```

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.

```CSS
.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;
}
```
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.