Introdução

Fala pessoal, dando continuidade ao experimento que fizemos no post passado, hoje iremos aprender a criar a animação para o nosso menu fullscreen.

Como já disse, a ideia é fazer vários tipos de vídeos lá no Youtube sobre coisinhas técnicas que podemos usar no nosso dia-a-dia e também, pretendo fazer alguns outros vídeos sobre carreira, trabalho remoto e outras coisas mais, que sempre me perguntam e que não daria para se fazer como um curso, mas cabe muito bem num vídeo.

Então, sem mais delongas, vamos ao vídeo e logo abaixo, o código como sempre.

Vídeo

Código

Primeiro segue o nosso html, que dessa vez não mudou muita coisa, só mesmo tendo a adição do nosso menu:

<ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Work</a></li>
</ul>

E aí, na parte do nosso css, tivemos também poucos detalhes. Nós primeiro fizemos o nosso efeito de hover, que também foi a base para usar na nossa animação, onde usamos a propriedade de box-shadow, que como eu disse, é extremamente poderosa no CSS.

Eu também uso viewport unit para definir os tamanhos do shadow e se você nunca tinha ouvido falar, eu tenho um post onde eu falo um pouquinho sobre e também mostro com exemplos.

O CSS feito nesse vídeo então, fica assim :

.menu {
    cursor: pointer;
    box-shadow: 0 0 0 0 #FFF, 0 0 0 0 #FFF;
    transition: box-shadow 1.1s cubic-bezier(.19,1,.22,1);
}

.menu:hover {
    box-shadow: 0 0 0 8px #FFF, 0 0 0 8px #FFF;
}

// animação do menu
input:checked ~ label .menu {
    box-shadow: 0 0 0 130vw #FFF, 0 0 0 130vh #FFF;
}

// só aparecer o menu ao clicar
input:checked ~ ul {
    opacity: 1;
}

// animação e estilo do menu
ul {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    font-size: 45px;
    opacity: 0;
    transition: .25s .1s cubic-bezier(0, 1.07, 0, 1.02);
    z-index: 2;
}

a {
    color: #00cec9;
    display: block;
    margin-bottom: 1em;
    text-decoration: none;
}

Se você quiser ver todo o código completo, só acessar esse link do Github.

Conclusão

Bom pessoal, espero que tenham gostado desse novo formato, com vídeo e post. Acho que fica mais dinâmico quando é para explicar esse tipo de coisa. Se vocês gostaram, por favor, não deixem de compartilhar e dar joinhas lá no YouTube.

E se você achou uma merda, pode falar também, eu aceito críticas numa boa e isso ajuda muito a melhorar para os próximos vídeos. Espero vocês nos próximos posts e vídeos!