Hello, I'd like to know how I can do this "drawer" effect, just like this site: link
Please note that it appears with height and width 100% then decreases to the normal size of a header, I do not know how to do this with just CSS, I believe you have JS together.
I would like it not to be an onclick event for example, and to do automatic, just like there is
I do not know if this is exactly how this example was done, but only with CSS it's perfectly possible to get the same result.
There are other ways to do it, but the one I found easiest was putting at the end of your code a div with positon:absolute and a z-index auto to ensure that you will not be left behind anything, the aimation property and the @keyframes you do the animation, in the case I did a 1 second animation that starts with a delay of 0.5 seconds and only repeats once ( forwards )
See what the result was like:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
header {
background-color: blue;
color: #fff;
height: 50px;
line-height: 50px;
font-family: sans-serif;
}
.efeito {
position: absolute;
z-index: 10;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: blue;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
font-size: 100px;
font-weight: bold;
color: #fff;
animation: anima 1s linear 500ms forwards;
}
@keyframes anima {
to {
top: -100vh;
}
}<header>
menu nav
</header>
<section>
conteúdo site<br>
<input type="text" name="" id=""><br>
<button>button</button>
</section>
<div class="efeito">
Texto Intro
</div>