0

Abertura de Star Wars em HTML com canvas, CSS 3D e JavaScript

Maycon Fuzita
Maycon Fuzita

Abertura de Star Wars em HTML com canvas, CSS 3D e JavaScript


MAY THE 4th BE WITH YOU!

 

Uma das citações mais famosas da franquia, que se repete em vários filmes, é “Que a Força esteja com você”. Em inglês, idioma original da obra de George Lucas, a citação fica assim: “May the Force be with you”. Assim, era muito comum que os fãs da série fizessem um trocadilho com esta frase, dizendo “May the Fourth be with you" — traduzindo: Que o 4 de maio esteja com você.

 

Aproveitando um artigo bastante interessante que conheci a alguns dias e que estamos hoje em 4 de maio, resolvi compartilhá-lo, traduzindo-o com minhas palavras.

 

Neste artigo é sobre a criação de um texto no estilo de Star Wars em HTML com canvas, CSS3 e JavaScript.

 

O artigo completo foi dividido em 2 partes e neste aqui irei explicar a primeira parte:


 1 - O texto em amarelo em movimento, afunilando e sumindo.

2 - O plano de fundo preto com as estrelas em movimento.

 

- Rastreamento do Texto:

 

Estrutura inicial do Html:

 

<!DOCTYPE html>
<html>
<head>
               <link href="https://fonts.googleapis.com/css?family=Roboto:500&display=swap" rel="stylesheet"/>
               <link rel="stylesheet" type="text/css" href="/css/style.css">
               <title>...</title>
</head>
<body>
 
<div id = "crawl-container" class = "stretch">
 <div id = "crawl">
   <div id = "crawl-content">
<img src=".../..." width="...">
     <h2>...</h2>
     <p>...</p>
   </div>
 </div>
</div>
 
</body>
</html>

 

Construção:

 

Iremos utilizar o CSS 3D no div “craw” para que possamos torná-lo em um espaço tridimensional, ancorando a borda inferior na parte inferior da tela, essa div deverá ter sua altura com o dobro da altura da tela, e fazer com que essa borda superior “caia” dentro da tela.

Na sequência iremos animar a posição superior para crow-content superior, assim irá parecer estar se afastando da nossa visão.

 

E depois iremos adicionar uma máscara de transparência para que a parte superior do texto pareça sumir na tela.

 

Iremos utilizar nosso bom amigo CSS buscando imitar as fontes e cores do texto original.

 

Perspectiva:

 

O intuito é criar uma perspectiva em nosso div crow. Uma inclinação utilizando o CSS. Por regra, o div filho é afetado por uma alteração em seu div pai, então defiminos o div pai: craw-container.

 

# crawl-container {
perspectiva: calc (100vh * 0.4);
}

 

Aqui estamos utilizando unidades de altura vh e dimensionando-as em 0,4, criando um ponto de fuga.

 

Criando o Plano 3D:

 

Entendendo o css

 

#crawl { 
color: #f5c91c;      // texto amarelo
 position: absolute;  // posição fixa
 width: 110%;        // 10% maior que a largura da tela
 left: -5%;           // deslocamento simétrico para a esquerda
 bottom: -5%;         // ancora inferior 5% abaixo do limite da tela
 height: 200%;        // duas vezes
 overflow: hidden;    // não mostrar a barra de rolagem
// Plano 3D 
transform-origin: 50% 100%;
 transform: rotate3d(1, 0, 0, 45deg); // girar em torno do eixo x 45 graus
}

 

Imagem: Plano 3D

 

Transparência nas linhas mais distantes:

 

É um toque sutil, mas que faz muita diferença, uma máscara onde iremos utilizar um gradiente linear com 3 pontos: superior, médio e inferior.

Em sua parte superior, a máscara irá esmaecer todo conteúdo em -0% de opacidade.

No ponto central teremos 66% de opacidade.

Na parte inferior teremos 100% de opacidade.

 

#crawl {
mask-image: linear-gradient(
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.66),
rgba(0, 0, 0, 1));
}

 

Para ajudar na compatibilidade com navegadores, podemos adicionar o -webkit:

 

#crawl {
-webkit-mask-image: -webkit-linear-gradient(
       rgba(0, 0, 0, 0),
       rgba(0, 0, 0, 0.66),
       rgba(0, 0, 0, 1)
     );
}

 

Imagem: Esquerda sem máscara e direita com máscara

 

Animando o rastreamento

 

O conteúdo do texto é posicionado de modo a ser movido para cima ao manipularmos a propriedade top.

 

Dentro do campo estelar do plano de fundo, que está na outra parte do artigo original, o qual pretendo falar em um próximo artigo aqui na DIO e utiliza muita matemática, para Nazaré nenhuma colocar defeito, já foi criado um loop de animação básico em JavaScript. Para o texto podemos pegar uma carona nele para mover o texto para cima:

 

const crawl = document.getElementById("crawl");
const crawlContent = document.getElementById("crawl-content");
const crawlContentStyle = crawlContent.style;
 
// inicia o rastreamento na parte inferior do plano 3D
let crawlPos = crawl.clientHeight;
 
const moveCrawl = distance => {
 crawlPos -= distance;
 crawlContentStyle.top = crawlPos + "px";
 
 // se rolamos todo o conteúdo além da borda superior
// do plano, ele é reposicionado na parte inferior do plano
 if (crawlPos < -crawlContent.clientHeight) {
   crawlPos = crawl.clientHeight;
 }
};
 
let prevTime;
const init = time => {
 prevTime = time;
 requestAnimationFrame(tick);
};
 
const tick = time => {
 let elapsed = time - prevTime;
 prevTime = time;
 
 // time-scale of crawl, increase factor to go faster
 moveCrawl(elapsed * 0.04);
 requestAnimationFrame(tick);
};
 
requestAnimationFrame(init);

 

Dando estilo ao texto:

 

Para tentar replicar a mesma aparência do Texto original, utilizaremos uma fonte Roboto de peso médio, com um espaçamento entre as letras.

E para finalizar o texto será reduzido conforme a largura da tela.

 

#crawl-content {
 font-family: "Roboto";
 letter-spacing: 0.09em;
 font-size: calc(100vw * 0.074);
}

 

Resultado: