Como codificar efeitos de texto inteligentes com CSS

Sep 12, 2025
Como
Image: Middle Child
[Imagem: criança média]

Links de rollover são uma ótima maneira de chamar a atenção de um usuário, especialmente se eles fizerem algo incomum ou original. A criança do meio tem um grande efeito, raramente visto em outros lugares, que captura cada letra e divide-se com animação, que entra quando o visitante paira sobre a palavra. A animação ajuda a transmitir o caráter lúdico da marca Sandwich.

Neste artigo, mostramos como recriar o efeito em seu site. Para mais inspiração, dê uma olhada no nosso guia para o Melhores exemplos de animação CSS (com instruções sobre como codificá-los). Para algo um pouco diferente, tente um top Construtor de sites ou nossa escolha do melhor armazenamento na núvem . E se você está tornando seu site mais complexo, certifique-se de que você hospedagem na web. está no ponto.

01. Efeito de texto de rollover

Um dos grandes efeitos de texto no site da criança do meio é para os efeitos de rolagem no menu, onde as letras se separam no texto e giram ligeiramente. Comece com algumas tags HTML simples. 

 & lt; div classe = "wrapper" & gt;
& lt; div classe = "palavra" & gt; café da manhã e lt; / div & gt;
& lt; / div & gt;

02. Crie CSS.

Use uma etiqueta de arquivo ou estilo de CSS separadas para adicionar as seguintes regras de CSS e fazer a página preencher o tamanho total do navegador, garantindo o corpo e o wrapper tomar a altura total disponível. 

 corpo {
Largura: 100%;
Altura: 100%;
Margem: 0;
preenchimento: 0;
}
.embrulho {
Exibir: grade;
Altura: 100%;
}

03. Posicione a palavra

O palavra Classe centra a palavra na grade. Qualquer texto que seja dado o palavra classe pode ter sido aplicada. O acima a aula vai ser aplicada a todas as outras letras e elas se moverão para cima. 

. Palavras {
Tamanho da fonte: 3em;
Margem: Auto Auto;
}

.Prite
{
Exibir: bloco inline;
Transform: translate3d (0px, 0px, 0px)
girar (0deg);
Transição: Todos os 0.5s facilitam-out;
}

04. up e mais

Agora o baixa Aula compartilha configurações muito semelhantes ao acima Mas o pau mostra o movimento para cima para o acima rolar. Para cima também é girado ligeiramente para melhorar a aparência. 

 .Word.
{
Exibir: bloco inline;
Transform: translate3d (0px, 0px, 0px)
girar (0deg);
Transição: Todos os 0.5s facilitam-out;
}

.word: hover .up
{
Transform: translate3d (0px, -8px, 0px)
girar (12DEG);
Cor: # 058b05
}

05. pairando para baixo

Quando o usuário paira sobre o texto, a classe baixa move o texto para baixo. Mais tarde em Javascript, o texto será dividido em vãos separados com as classes adicionadas automaticamente para alternar as vãos. 

. Palavras: Hover .Down {
Transform: translate3d (0px, 8px, 0px)
girar (-12DEG);
cor: # 058b05;
}

06. Automático para as pessoas

É um pouco de um incômodo ter que colocar todas as letras em vãos alternados com diferentes classes, então vamos automatizar o processo recebendo o JavaScript para consultar o seletor e tomar cada letra. Aqui o str A variável pega a letra atual enquanto ele circula pelo texto. 

 & lt; script & gt;
var elementos = document.queryselectorall
('.palavra');
para (var eu = 0, l = elementos.Length; eu
& lt; eu; i ++) {
var str = elementos [i] .TextContent;
elementos [i] .innerhtml = '';

07. Adicionar classes alternadas

Agora outro loop coloca cada letra em seu próprio elemento de span e adiciona o acima ou baixa classe para os vãos. Se você olhar para isso no navegador, verá o texto dividido por cada letra para cima e para baixo, enquanto girando ligeiramente.

Você pode ver o efeito em ação no Web site da criança do meio . 

 para (var j = 0, ll = str.length; j
& lt; ll; j ++) {
var spn = document.createelement ('span');
elementos [i] .Appendchild (SPN);
spn.TextContent = str [J];
Deixe Pos = (J% 2)? 'cima baixo';
spn.classlist.add (pos);
}
 }
& lt; / script & gt;

Este artigo foi originalmente publicado na revista Creative Web Design Web designer . Compre Edição 286. ou se inscrever .

Consulte Mais informação:

  • Adicionar filtros SVG com CSS
  • Como projetar com formas CSS: uma introdução
  • 5 Geradores de Grade CSS Cool CSS

Como - Artigos mais populares

Pureref: Como usar a ferramenta de referência de imagem

Como Sep 12, 2025

(Crédito da imagem: Brendan McCaffrey (conceito original de Clara McCaffrey)) Pureref é um ótimo exemplo de uma pe..

Comece com Babel 7

Como Sep 12, 2025

Javascript é único devido à amplitude do ecossistema. Enquanto novos padrões adicionam açúcar sintático, os suportados nos..

Melhore suas habilidades de arte conceitual no Photoshop

Como Sep 12, 2025

Para este workshop, gostaria de mostrar uma maneira muito divertida de esboçar os personagens da sua imaginação. Eu vou mostra..

Speed ​​esculpir uma criatura em zbrush

Como Sep 12, 2025

Quando concepting criaturas em zbrush, apresentando sua ideia como um pedaço de cinza, pedaço unposto de Arte 3D. ..

Como remover um fundo no Photoshop

Como Sep 12, 2025

Página 1 de 4: A ferramenta mágica de varinha A ferramenta mágica de varinha A rápida seleção e ..

Criar uma imagem de paralaxe interativa

Como Sep 12, 2025

Rolagem de paralaxe. não é mais o grabber garantido de atenção que costumava ser, mas há outras maneiras de usar técnicas de paral..

As regras de tipografia de web responsiva

Como Sep 12, 2025

Tipografia de Web responsiva é difícil - você precisa ter cores de design e know-how técnico. Mas, por mais complicado, pode ser errado não é uma opção, porque a tipografia é a pedra..

Como fazer explosões massivas com V-Ray

Como Sep 12, 2025

Criar e compor explosões 3D geralmente é uma tarefa para dois artistas diferentes ou departamentos de estúdio, mas aqui vamos ..

Categorias