Crie um logotipo 3D animado para o seu site

Contente

• Começando
• Criando a base da mesa giratória
• Criando os pés
• O braço e a cabeça
• Cores e texturas
• Renderizando e exportando
• Finalizando o logotipo
• Anime o logotipo

Existem várias maneiras de criar animação 3D na web, a maioria delas exigindo um bom conhecimento de JavaScript e WebGL, ou o uso de um plug-in como o Flash. Graças às transformações CSS 3D, é possível criar 3D usando apenas HTML e CSS, mas não é fácil de fazer. Tridiv, meu aplicativo online gratuito, simplifica o processo, oferecendo uma interface WYSIWYG simples e intuitiva que permite aos usuários criar objetos 3D sem escrever uma única linha de código.

Neste tutorial, vamos criar e animar um logotipo para 'Tridiv Records', uma gravadora fictícia, usando apenas HTML e CSS. O visual principal do logotipo será criado em 3D no Tridiv. Em seguida, adicionaremos os elementos tipográficos usando HTML e CSS regulares.

Você pode ver a animação final e o código que a gera aqui.

Começando

Vamos começar criando a plataforma giratória em 3D usando o Tridiv. Acesse tridiv.com e inicie o aplicativo. Você precisará usar o Chrome, Safari ou Opera 15 (ou posterior).

Antes de começar, é importante entender a interface do Tridiv. A seção principal do editor é composta por quatro visualizações: no canto superior esquerdo está a visualização 3D, fornecendo uma visão completa da cena. As outras três vistas mostram-no de cima, de lado e de frente. Usando essas três visualizações, você pode criar, editar e mover formas 3D.

A barra de ferramentas horizontal é dividida em duas partes: a parte esquerda exibe informações relacionadas ao seu documento; a parte certa contém ferramentas para criar e editar formas. O Mover seleção e Editar os botões de seleção alternam entre os diferentes modos de edição.

O painel de propriedades (a barra lateral) exibe as configurações do documento, como zoom e ajuste à grade, e as propriedades da forma selecionada (tamanho, posição, rotação, cor e assim por diante). A unidade usada para dimensões e posição é ems; os ângulos de rotação são em graus.

Para evitar qualquer confusão posteriormente no tutorial, usaremos a seguinte abreviação:

w = largura h = altura d = profundidade diam = diâmetro x deg = rotação no eixo x y deg = rotação no eixo y z deg = rotação no eixo z

Criando a base da mesa giratória

Comece definindo o valor de zoom para 200. Para ajudar a desenhar as formas, ative a configuração de ajuste à grade no Configurações do Documento seção da barra lateral. Defina o valor de ajuste para 0.125.

A base da plataforma giratória é composta por um cuboide simples, então clique no Adicionar cubóide botão na barra de ferramentas superior. Você deve ver o cubóide aparecer em todas as quatro visualizações no editor.

Renomeie a forma para base usando o campo de nome do painel de propriedades (em Propriedades da forma) O nome da forma deve ser um nome de classe CSS válido porque será usado no código gerado pelo editor. Usaremos esses nomes de classe mais tarde, ao animar o logotipo, portanto, certifique-se de nomear cada nova forma que criar corretamente.

Uma vez que o cuboide é nomeado, certifique-se de que ele esteja selecionado na vista superior (ele deve estar destacado em azul, com um anel circular de ferramentas ao redor dele), então clique no botão Editar botão na parte superior do anel para mostrar as alças de edição. Arraste as alças de controle nas laterais do cuboide, até que a largura e a profundidade atinjam w = 10 e d = 8 no Propriedades da forma.

Clique na forma dentro da vista lateral. Isso mostrará as alças de edição nesta visualização, permitindo-nos alterar sua altura. Ajuste a altura até atingir h = 2. Você também pode digitar valores diretamente no painel de propriedades. Para arredondar os cantos do cubóide, altere os valores dos cantos no painel de propriedades para 1.75, então pressione o [Entrar] chave para aplicar as alterações. Você terá algo assim.

Criando os pés

Para os pés da plataforma giratória, vamos usar cilindros. Adicione um cilindro e, em seguida, altere seu diâmetro para diam = 1,75 e sua altura para h = 0,5. Clique no Mover botão de seleção na barra de ferramentas superior para mostrar a área arrastável na forma. Mova o cilindro sob a base, posicionando-o em um dos cantos. (Pode ser necessário movê-lo nas vistas superior, lateral e frontal.)

Duplique o cilindro (pressione o Duplicado botão no anel circular de ferramentas, ou pressione o D chave) e para mover o novo cilindro para outro canto da base. Repita o processo até que todos os quatro pés estejam posicionados corretamente. Não se esqueça de nomear os cilindros (por exemplo, pés-esquerdo-topo, pés-direito-topo, pés-esquerdo-fundo, pés-esquerdo-topo) Quando você tiver feito isso, o resultado deve ser o seguinte.

Vamos agora dar uma olhada na criação do prato, disco, eixo do braço e botão. O processo de criação das próximas formas é semelhante ao dos pés. Aqui estão as dimensões usadas para os diferentes cilindros:

prato: diam = 7; h = 0,5 disco: diam = 6,75; botão h = 0,25: diam = 1,5; h = 0,25 base do eixo do braço: diam = 2,25; h = 0,25 eixo do braço: diam = 1,375; h = 1

Para refinar os lados dos cilindros, você pode aumentar o número de faces em cada um, usando o campo de lados no painel de propriedades. Não adicione muitos lados, pois isso pode influenciar negativamente o desempenho global do editor e da animação final. Neste caso, aconselho você a não usar mais de 32 lados para o prato e o disco. Você deveria ter algo assim.

O braço e a cabeça

Para o braço e a cabeça da mesa giratória, vamos usar cubóides. Para o braço, crie um cubóide (w = 0,25; h = 0,25; d = 4) e, em seguida, aplique uma rotação de -33° no eixo y. Para a cabeça, crie um cubóide (w = 0,5; h = 0,5; d = 1) e, em seguida, aplique uma rotação de -33° no eixo y. Alinhe as duas formas com o cilindro do eixo do braço. O resultado deve ser assim.

Cores e texturas

Estamos quase terminando o toca-discos. A etapa final é atribuir cores e aplicar uma textura ao vinil (uma imagem que representa a superfície do disco). Para atribuir cores, selecione uma forma e clique no cores campo no painel de propriedades. Tridiv permite que você especifique cores individuais para cada face de uma forma, mas, neste exemplo, precisamos usar o campo all para alterar a cor de todas as faces. Para fazer isso, basta inserir um código de cor hexadecimal no campo e confirmar pressionando Entrar.

Aqui estão as cores usadas neste exemplo:

base: # 0099FF pés, botão, eixo, braço e cabeça: # F2EEE5 disco: # fa7f7a

Para a textura do vinil, o processo é semelhante à atribuição de cores. Selecione o cilindro do disco e clique no imagens campo no painel de propriedades. Cole o URL da imagem que deseja aplicar ao vinil no campo superior e confirme pressionando Entrar. Você pode usar uma imagem sua ou baixar a usada neste exemplo.

Agora você deve ter algo parecido com isso.

Renderizando e exportando

Agora que o toca-discos está pronto, vamos trabalhar na maneira como ele é renderizado antes de exportá-lo. Clique no Antevisão botão na parte superior do painel de propriedades. Defina o valor do zoom para 200 para exibir a plataforma giratória maior. Para remover as bordas pretas das formas, vá para o Fronteiras seção do painel e defina a opacidade para 0. O resultado deve ser parecido com este.

Queremos que o gira-discos seja iluminado por cima. Para fazer isso, gire a cena de forma que a parte superior da plataforma giratória fique voltada para você. A base deve parecer perfeitamente retangular. Alterar os valores de claro e escuro na seção tridiv.com/d/4k6 do painel de propriedades irá regenerar as sombras dentro da cena. Altere o valor da luz para 0.

O toca-discos agora está pronto para exportar!

Finalizando o logotipo

Estamos prontos para adicionar o texto ao logotipo e criar a animação do logotipo. Clique no Editar no botão CodePen na parte inferior esquerda do Antevisão view para exportar o código para CodePen. É importante observar que o código CSS gerado pelo Tridiv não usa prefixos de fornecedores, então você precisará usar ferramentas como prefixr.com ou leaverou.github.io/prefixfree para tornar o código funcional em todos os navegadores. Comece fechando o painel JavaScript, já que não vamos usá-lo. No painel HTML, remova a tag de estilo aplicada ao .cena div.

Expanda o painel CSS e adicione o seguinte código no final:

.scene {transform: translateY (-140px) rotateX (-55deg); }

Aqui o translateY (-140px) move a plataforma giratória 140px para cima, deixando espaço para o texto abaixo dela. Então o rotateX (-55deg) define a inclinação vertical da plataforma giratória.

Para adicionar o texto, você precisa adicionar um .título div logo após a abertura #tridiv div no painel HTML. Dentro, adicione dois vãos> (.main-title e .sub-title), separado por hr />:

div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…

Em seguida, você precisa aplicar as fontes e estilos corretos. No painel CSS, importe a fonte Open Sans usada no logotipo e adicione os estilos básicos para os elementos de texto.

@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centralização do bloco de texto + estilos de fonte básicos * / title {position: absolute; topo: 50%; esquerda: 50%; margem: 0 0 0 -165px; largura: 330px; altura: 5em; família de fontes: 'Open Sans', sans-serif; peso da fonte: 300; tamanho da fonte: 24px; alinhamento de texto: centro; espaçamento entre letras: 1,5em; cor: # 0099FF; } title hr {border: 1px solid # fa7f7a; margem: 0,75em 0; } extensão do título {display: block; } .main-title {font-size: 2.15em; } .sub-título {text-indent: .25em; }

Voilà! Seu logotipo está completo. Deve ser parecido com a imagem abaixo. Assim que seu modelo 3D estiver pronto, você pode usar o poder do CSS para torná-lo ainda melhor adicionando estilos, animações ou eventos de mouse: apenas trate o modelo 3D como qualquer outro elemento HTML.

Anime o logotipo

Veja uma animação usando o logotipo aqui. Conforme as partes da plataforma giratória "caem", cada uma delas compartilha a mesma animação de quadro-chave com diferentes atrasos. As formas têm o atributo superior definido como 50%. Para criar o efeito de queda, animamos o atributo superior de -400px para 50%:

@keyframes caem {0% {topo: -400px; } / * Começamos a animação posicionando a forma em uma altura de 400px * / 100% {top: 50%; } / * então terminamos em sua posição original * /}

Você pode adicionar essa animação a todas as formas, da seguinte maneira:

.shape {topo: -400px; animação: queda 1s atenuação 0s para a frente; }

Defina o atributo principal para -400px e adicione um atraso:

.platter {animação-atraso: 1.05s; } .disc {animação-atraso: 1,35s; } .button {animação-delay: 1.5s; } ...

Crie o efeito final de 'salto' usando o rotateX atributo:

90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }

É assim que criamos esta versão em particular, mas lembre-se: não há limites!

Palavras: Julian Garnier

Este artigo apareceu originalmente na edição 248 da net magazine.