Recriando a abertura de Star Wars com CSS3 e Sass

CSS3 é uma tecnologia muito poderosa que nos permite criar muitos projetos incríveis.

Neste artigo iremos recriar a abertura de Star Wars usando CSS3 e Sass. Para isso iremos aplicar conceitos como animações e transições em CSS, além de usar recursos do Sass bem interessantes, como o uso de variáveis por exemplo.

Preparando o Ambiente

Para começar iremos instalar o Sass para que possamos utilizá-lo em nosso projeto. Iremos utilizar o Node para isso.

Será necessário iniciar um novo projeto em Node para realizar essa instalação. Assim, iremos executar npm init -y para criar um novo projeto. Esse comando criará também um arquivo chamado package.json, onde estarão armazenadas nossas dependências, assim como os scripts que podemos executar em nosso projeto.

Iremos agora instalar o Sass, utilizando o comando npm install sass --save-dev.

Com o Sass instalado, iremos adicionar um novo script no arquivo package.json. Esse script se chamará sass e executará o seguinte comando:

sass sass:css --watch

Esse comando do Sass é o responsável por selecionar os nossos arquivos em Sass, que estarão dentro de uma pasta chamada “sass”, e convertê-los para arquivos CSS, que o navegador consegue ler. Esses arquivos finais estarão em uma pasta chamada “css”.

Após realizar essa configuração inicial, estamos prontos para começar o desenvolvimento da abertura. Podemos dizer que essa abertura consiste em três partes principais: 1) a famosa frase “Há muito tempo, em uma galáxia muito, muito distante...”, 2) o logo da franquia aparecendo e avançando no eixo de profundidade até sumir e por fim 3) um letreiro que irá informar uma introdução sobre o que o filme tratará. Iremos criar um código HTML e CSS com Sass para cada um desses componentes ?.

Frase “Há muito tempo atrás”

Criando estrutura HTML

A tag que englobará todo o conteúdo da nossa introdução será uma tag main. Dentro dela, iremos criar uma seção com id “long-time-ago”, que irá conter a frase introdutória:

<section id="long-time-ago">
    <h2>Há muito tempo, em uma galáxia muito, muito distante...</h2>
</section>

Criando estilos CSS com Sass

Após isso, vamos definir os estilos CSS que irão compor esse elemento.

Será necessário deixar o fundo de nossa tela completamente escuro, assim como é comum nos filmes da saga. Para isso, usaremos o seguinte código:

body {
    background-color: #000;
    overflow: visible;
}

Em seguida, iremos definir os estilos da tag main, deixando o código CSS da seguinte forma:

main {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    user-select: none;
}

O estilo font-family é usado para definir qual será o tipo de fonte que iremos usar na página. Além disso, o estilo user-select: none nos permite definir que o texto das tags não poderá ser selecionado pelo usuário.

Os estilos para a seção “long-time-ago” ficarão desta maneira:

#long-time-ago {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #24E8EE;
    width: 100%;
    height: 100vh;
}

Com este código nós definimos que essa seção usará o Flexbox Layout como seu display, ocupará a tela inteira, possuirá em seus textos uma cor azul clara, típica dos filmes, e irá alinhar o seu conteúdo no centro de sua estrutura, ou seja, no centro da página.

Por fim, precisamos definir o estilo da nossa tag h2. Ela precisará ter uma largura limite definida e também precisará ter um tamanho de fonte um pouco maior que o normal. Por isso, iremos usar o seguinte código para definir seus estilos:

h2 {
    width: 18em;
    font-size: 300%;
}

Algo interessante que podemos notar é que, como estamos usando o Sass, temos acesso ao recurso do alinhamento de seletores e estilos, o que facilita bastante organizar nossos seletores. Nosso arquivo CSS até o mesmo está da seguinte maneira:

Quando atualizamos nossa página, vemos o seguinte resultado:

Criando animação

Agora que nossos estilos CSS foram definidos, precisamos criar a animação deste componente. Essa animação envolve exibir a frase na tela através de uma transição de esmaecer, e depois de alguns segundos ocultar a frase, usando a mesma transição.

Quando falamos de animações que envolvem exibir e ocultar elementos, pode ser que lembremos do estilo opacity. Iremos utilizar a diretiva @keyframes para criar uma animação que irá definir que no início da animação, o estilo opacity do elemento estará como 0. Depois, quando a animação atingir um quarto de sua duração, ou seja 25%, o opacity se tornará 1, para que o texto apareça. Por fim, quando a animação chegar perto de seu final, por volta de 95%, iremos mais uma vez definir o opacity como 0 para que ele suma. Nossa animação ficará assim:

@keyframes long-time-ago {
    0% {
        opacity: 0;
    }
    25%, 80% {
        opacity: 1;
        display: flex;
    }
    95% {
        opacity: 0;
        display: none;
        width: 100%;
        height: 100vh;
    }
    100% {
        width: 0;
        height: 0;
    }
}

Agora, basta realizar a chamada dessa animação no elemento em que estamos trabalhando utilizando o estilo animation:

opacity: 0;
animation: long-time-ago 7s ease-out 1s forwards;

Definimos o opacity como 0 de início para que o elemento seja exibido apenas quando a animação começar. Note que a animação irá durar 7 segundos e irá esperar 1 segundo para começar, ou seja, terá um 1 segundo de delay.

Agora, ao atualizar nossa página, veremos uma pequena animação de “surgimento” e “desaparecimento” do texto inicial.

Com isso, a primeira parte de nossa abertura está finalizada.

Logo Principal

Depois de alguns segundos em que as palavras iniciais são exibidas, o logo da saga precisa surgir na tela e é nesta parte que iremos trabalhar agora.

Criando estrutura HTML

O logo será um SVG. Nós iremos carregá-lo na página usando uma tag <img />, mas poderíamos inseri-lo diretamente no código, não haveria problema:

<img src="./assets/star-wars.svg" alt="Logo de Star Wars" id="star-wars-logo" />

Criando estilos CSS com Sass

Essa imagem precisará basicamente ocupar todo o espaço disponível para ela. Para isso, utilizaremos o seguinte código:

#star-wars-logo {
    width: 100%;
    transform: scale(1.5);
}

Note que também usamos o estilo transform: scale(1.5). Ele será usado para que o logo apareça na tela um pouco maior do que o normal e depois vá diminuindo.

A nossa página deverá estar assim:

Criando animação

A animação desse componente da abertura envolve mostrar o logo da saga aparecendo dos quatro cantos da tela e depois ir diminuindo seu tamanho, aprofundando na tela, até desaparecer. Para realizar essa animação podemos trabalhar com a escala do elemento, que nós definimos através da propriedade transform.

Para isso, iremos utilizar o seguinte @keyframes:

@keyframes star-wars-logo {
    0% {
        transform: scale(1.5);
    }
    50% {
        transform: scale(1);
    }
    95% {
        transform: scale(0);
        width: 100%;
        display: none;
    }
    100% {
        width: 0;
    }
}

Através dele iremos definir que a escala da imagem começará na animação com 1.5 e terminará com 0, ou seja, desaparecerá.

Agora, para realizar a chamada dessa animação em nosso elemento, nos deparamos com duas questões: 1) A nossa imagem precisa estar oculta quando a página carregar. 2) A animação do logo só pode iniciar depois que a primeira animação tiver terminado. Como podemos resolver essas situações?

1 - Para que a imagem comece oculta, basta definir uma escala igual a 0, para que ela de fato não apareça na tela:

display: block;
transform: scale(0);

Note que definimos o display como block. Isso é necessário, pois a própria animação irá mudar seu valor para none posteriormente.

2 - Para saber quando a animação do logo precisa começar, basta saber quando a animação das primeira frase termina. Sabemos que a animação long-time-ago possui 7 segundos de duração e 1 segundo de delay. Dessa forma, podemos concluir que a animação star-wars-logo deverá aguardar 8 segundos (7 + 1) para iniciar sem que haja um conflito nas animações. Com isso em mente, basta definir um delay de 8 segundos nesta segunda animação.

Contudo, há uma maneira de facilitar esse processo. O Sass nos permite realizar a definição de variáveis no CSS. Com isso, fica mais fácil realizar operações e mudanças nas variáveis posteriormente sem afetar o funcionamento atual. Vamos criar duas variáveis no início de nosso código Sass. Para isso, basta usar o sinal de $ (cifrão) e informar o nome da variável junto com seu valor:

$long-time-ago-duration: 7;
$delay: 1;

A primeira variável contém a duração da primeira animação, 7 segundos. A segunda variável contém o delay inicial, 1 segundo.

Agora será necessário mudar um pouco a definição da animação no elemento com id “long-time-ago”:

animation: long-time-ago $long-time-ago-duration + s ease-out $delay + s forwards;
$delay: $long-time-ago-duration + $delay;

Com esta mudança a chamada dos segundos da animação está ocorrendo de acordo com o valor das variáveis.

Além disso, na segunda linha nós definimos um novo valor para a variável $delay, que passará a conter o tempo total da animação. Iremos usar essa informação para definir o valor do delay da segunda animação e de qualquer outra animação que criarmos futuramente.

Muita coisa, não é mesmo?

Agora, voltando à nossa segunda animação, vamos realizar a sua definição com este código:

$star-wars-logo-duration: 9;
animation: star-wars-logo $star-wars-logo-duration + s linear $delay + s forwards;
$delay: $star-wars-logo-duration + $delay;

Note que o valor da variável $delay foi redefinido mais uma vez para a nossa próxima animação.

Agora, ao acessar o nosso projeto, vemos o seguinte resultado:

A segunda parte da abertura está finalizada ?!

Descrição do filme

Por fim, chegamos à última parte de nossa abertura: o texto inicial que descreve o que acontecerá no filme.

Criando estrutura HTML

Esse texto introdutório estará dentro de uma nova seção, que possuirá uma div apenas para o título do filme, e depois uma sequência de tags de parágrafo para cada uma das frases da descrição:

<section id="intro-resume">
    <div>
        <div id="movie-title">
            <h2>Episódio IV</h2>
            <h2>UMA NOVA ESPERANÇA</h2>
        </div>
        <p>É um período de guerra civil. Partindo de uma base secreta, naves rebeldes atacam e conquistam sua primeira vitória contra o perverso Império Galáctico.</p>
        <p>Durante a batalha, espiões rebeldes conseguem roubar os planos secretos da arma decisiva do Império, a ESTRELA DA MORTE, uma estação espacial blindada com poder suficiente para destruir um planeta inteiro.</p>
        <p>Perseguida pelos sinistros agentes do Império, a princesa Léia apressa-se em voltar para casa a bordo de sua nave estelar protegendo os planos roubados que podem salvar seu povo e restaurar a liberdade na galáxia...</p>
    </div>
</section>

Criando estilos CSS com Sass

O código CSS dessa parte de nossa abertura ficará da seguinte forma:

#intro-resume {
    display: flex;
    justify-content: center;
    > div {
        color: #FFC500;
        display: flex;
        justify-content: center;
        flex-direction: column;
        max-width: 600px;
        font-size: 200%;
        text-align: justify;
        transform: rotateX(35deg);
        #movie-title {
            text-align: center;
            h2 {
                font-size: 50px;
            }
        }
        p {
            font-weight: 700;
        }
    }
}

Através deste código definimos que iremos usar o Flexbox Layout para distribuir os elementos em nossa página, definimos a cor dourada para a descrição do filme e o tamanho e peso das fontes.

Contudo, um estilo que queremos dar atenção é o transform: rotateX(35deg). Ele é o responsável por deixar o texto inclinado na página. Além disso, precisamos mudar a perspectiva do elemento que engloba toda essa animação, a tag main. Assim, iremos adicionar este código ao seu CSS:

perspective: 300px;

Agora, ao acessar nosso projeto, vemos o seguinte resultado:

Está ficando bem interessante, não é mesmo?

Criando animação

A animação desta parte da abertura envolve exibir o texto introdutório do filme a partir da base da página e ir subindo com esse texto até ele desaparecer. Para fazer isso, podemos usar um outro recurso do estilo transform, o translateY. Ele é muito útil para quando desejamos mover um elemento em seu eixo vertical sem precisar alterar suas margens.

Pensando nisso, vamos definir que de início esse elemento possuirá o translateY como 80% e com o passar da animação seu valor será diminuído:

@keyframes star-wars-intro {
    0% {
        transform: rotateX(35deg) translateY(80%);
    }
    100% { 
        transform: rotateX(35deg) translateY(-150%);
    }
}

Especificamente nesta animação iremos informar os valores de duração e delay de maneira fixa:

transform: rotateX(35deg) translateY(85%);
animation: star-wars-intro 120s linear 11s;

Agora, ao acessar o projeto, depois de ver as duas animações já configuradas, podemos ver que a descrição do filme também está aparecendo:

Com isso, chegamos ao fim da nossa animação usando HTML5 e CSS3 com os superpoderes do Sass.

Entretanto, podemos implementar alguns recursos adicionais que podem deixar nossa experiência ainda melhor. Para isso, vamos precisar utilizar JavaScript.

Usando JavaScript para adicionar áudio

Sabemos que além da abertura em si, podemos aproveitar o tema de Star Wars no início de cada filme. Vamos adicionar isso ao nosso projeto também.

Mas, antes disso, vamos criar um botão que irá iniciar a animação que desenvolvemos apenas quando clicarmos nele:

<div id="init-movie">
    <button>Iniciar Filme ???</button>
</div>

Seu código CSS será o seguinte:

#init-movie {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    transition: opacity 1s linear;
    > button {
        border: 0;
        background-color: #FFC500;
        color: #000;
        text-transform: uppercase;
        padding: 20px;
        font-size: 20px;
    }
    &:active {
        border: none;
        outline: none;
    }
}

Ele estará da seguinte maneira em nosso navegador:

Mas, para que as animações não comecem logo ao acessar a página, todas precisam ser pausadas no início. Há um estilo CSS que define isso. Ele se chama animation-play-state. Contudo, nós podemos definir esse valor de maneira resumida, através do estilo animation em nosso arquivo CSS:

animation: long-time-ago $long-time-ago-duration + s ease-out $delay + s forwards paused;
animation: star-wars-logo $star-wars-logo-duration + s linear $delay + s forwards paused;
animation: star-wars-intro 120s linear 11s paused;

Agora, usando o JavaScript, vamos criar um evento de clique no botão recém-criado e definir que ao acontecer este evento, todas as animações serão iniciadas:

const initMovieBtn = document.querySelector("#init-movie > button");
const body = document.querySelector("body");

initMovieBtn.addEventListener("click", (event) => {
    const parentElement = event.path[1];
    window.scrollTo(0, 0);
    body.style.overflow = "hidden";
    parentElement.style.opacity = 0;
    parentElement.style.display = "none";
    document.querySelectorAll("#long-time-ago, #star-wars-logo, #intro-resume > div").forEach(el => {
        el.style.animationPlayState = "running";
    });
});

Por fim, vamos adicionar ao HTML uma tag audio que irá conter o tema da saga:

<audio src="./assets/star_wars_theme.mp3"></audio>

E vamos usar o JavaScript para selecionar esse elemento e começar a tocá-lo depois de aproximadamente 7 segundos, que é quando o logo aparece na tela. Para definir essa espera de 7 segundos, vamos usar a função setTimeout():

const audioEl = document.querySelector("audio");

setTimeout(() => {
    audioEl.play();
}, 7500);

Com isso, ao acessar o nosso projeto, poderemos clicar na tela e ver a animação iniciando em conjunto com o tema de Star Wars!

Conclusão

Você pode conferir o resultado final desse código clicando aqui.

Esperamos que esse artigo tenha te ajudado a entender a lógica das animações com CSS e muitos dos recursos que ele nos oferece, além dos recursos do Sass, que são realmente incríveis.

Nós explicamos cada um dos estilos mostrados neste artigo com mais detalhes e outros exemplos em nosso curso Dominando CSS3 com Sass. Não deixe de se inscrever neste curso para se tornar um especialista em CSS.

Muito obrigado por ter lido. Foi tão divertido recriar a abertura de Star Wars que acho que vou assistir algum dos filmes mais uma vez ?. Até o próximo artigo. :)