Contente
- 01. Efeito de texto rollover
- 02. Crie CSS
- 03. Posicione a palavra
- 04. Subindo e descendo
- 05. Pairando
- 06. Automático para as pessoas
- 07. Adicionar classes alternadas
Os links de rollover são uma ótima maneira de chamar a atenção do usuário, especialmente se ele fizer algo incomum ou original. A Criança do Meio tem um grande efeito, raramente visto em outros lugares, que captura cada letra e as divide com animação, que entra em ação quando o visitante passa o mouse sobre a palavra. A animação ajuda a transmitir o caráter lúdico da marca de sanduíches.
Neste artigo, mostramos como recriar o efeito em seu site. Para obter mais inspiração, dê uma olhada em nosso guia com os melhores exemplos de animação CSS (com instruções sobre como codificá-los). Para algo um pouco diferente, experimente um excelente construtor de sites ou escolha o melhor armazenamento em nuvem. E se você estiver tornando seu site mais complexo, certifique-se de que sua hospedagem na web esteja correta.
01. Efeito de texto rollover
Um dos grandes efeitos de texto no site do Middle Child é para os efeitos de rollover no menu, onde as letras se separam no texto e giram levemente. Comece com algumas tags HTML simples.
div> div> Breakfast / div> / div>
02. Crie CSS
Use um arquivo CSS separado ou tags de estilo para adicionar as seguintes regras CSS e fazer a página preencher o tamanho total do navegador, garantindo que o corpo e o invólucro ocupem toda a altura disponível.
corpo {largura: 100%; altura: 100%; margem: 0; preenchimento: 0; } .wrapper {display: grid; altura: 100%; }
03. Posicione a palavra
O palavra classe centraliza a palavra na grade. Qualquer texto que receba o palavra classe pode ter isso aplicado. O pra cima a classe será aplicada a todas as outras letras e estas serão movidas para cima.
.word {tamanho da fonte: 3em; margem: auto auto; } .word .up {display: bloco embutido; transform: translate3d (0px, 0px, 0px) rotate (0deg); transição: todos os 0,5s atenuados; }
04. Subindo e descendo
Agora o baixa classe compartilha configurações muito semelhantes ao pra cima mas o pairar mostra o movimento para cima para o pra cima rolar. Para cima também é girado ligeiramente para melhorar a aparência.
.word .down {display: bloco embutido; transform: translate3d (0px, 0px, 0px) rotate (0deg); transição: todos os 0,5s atenuados; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); cor: # 058b05}
05. Pairando
Quando o usuário passa o mouse sobre o texto, a classe down move o texto para baixo. Mais tarde, em JavaScript, o texto será dividido em extensões separadas, com as classes adicionadas automaticamente a extensões alternadas.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); cor: # 058b05; }
06. Automático para as pessoas
É um pouco incômodo ter que colocar cada letra em períodos alternados com classes diferentes, então vamos automatizar o processo fazendo com que o JavaScript consulte o seletor e pegue cada letra. Aqui o str variável pega a letra atual enquanto percorre o texto.
script> var elements = document.querySelectorAll (’.word’); para (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elementos [i] .innerHTML = ’’;
07. Adicionar classes alternadas
Agora, outro loop coloca cada letra em seu próprio elemento span e adiciona o pra cima ou baixa classe para os vãos. Se você olhar para isso no navegador, verá o texto dividido em cada letra para cima e para baixo, enquanto gira ligeiramente.
Você pode ver o efeito em ação no site da Middle Child.
para (var j = 0, ll = str.length; j 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); }} / script>
Este artigo foi publicado originalmente na revista de web design criativo Web designer.Compre a edição 286 ou se inscrever.
