Uma visão geral básica sobre como criar animações de letras de divisão e palavras.
Neste post, quero compartilhar ideias sobre maneiras de resolver animações de texto divididas e interações para a Web que sejam mínimas, acessíveis e funcionem em todos os navegadores. Confira a demonstração.
Se você preferir o vídeo, aqui está uma versão do YouTube desta postagem:
Visão geral
As animações de texto divididas podem ser incríveis. Vamos apenas arranhar a superfície do potencial de animação nesta postagem, mas ela fornece uma base para criar. O objetivo é animar de forma progressiva. O texto precisa ser legível por padrão, com a animação criada no topo. Os efeitos de movimento de texto dividido podem ficar extravagantes e potencialmente perturbadores. Por isso, só vamos manipular o HTML ou aplicar estilos de movimento se o usuário aceitar a animação.
Confira uma visão geral do fluxo de trabalho e dos resultados:
- Prepare variáveis condicionais de movimento reduzido para CSS e JS.
- Prepare utilitários de texto dividido no JavaScript.
- Orquestrar as condições e os utilitários no carregamento da página.
- Crie transições e animações CSS para letras e palavras (a parte mais rápida!).
Confira uma prévia dos resultados condicionais que vamos usar:
Se um usuário preferir movimento reduzido, o documento HTML não será alterado e não haverá animação. Se estiver tudo bem com o movimento, vamos cortar em pedaços. Confira uma visualização do HTML depois que o JavaScript dividiu o texto por letra.
Como preparar condicionais de movimento
A consulta de mídia @media
(prefers-reduced-motion: reduce)
, disponível, será usada de forma conveniente no CSS e
no JavaScript neste projeto. Essa consulta de mídia é nossa condição principal para
decidir se o texto será dividido ou não. A consulta de mídia do CSS será usada para reter
transições e animações, enquanto a consulta de mídia do JavaScript será usada para
reter a manipulação de HTML.
Como preparar o CSS condicional
Usei o PostCSS para ativar a sintaxe das Consultas de mídia de nível 5, em que é possível armazenar um booleano de consulta de mídia em uma variável:
@custom-media --motionOK (prefers-reduced-motion: no-preference);
Como preparar a condição do JS
No JavaScript, o navegador oferece uma maneira de verificar consultas de mídia. Usei a desestruturação para extrair e renomear o resultado booleano da verificação de consulta de mídia:
const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
Posso testar motionOK
e mudar o documento apenas se o usuário não tiver solicitado a redução de movimento.
if (motionOK) {
// document split manipulations
}
Posso verificar o mesmo valor usando o PostCSS para ativar a sintaxe @nest
do
esboço de aninhamento 1. Isso me permite
armazenar toda a lógica sobre a animação e os requisitos de estilo dela para o
elemento pai e os filhos em um só lugar:
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
Com a propriedade personalizada PostCSS e um booleano JavaScript, estamos prontos para fazer upgrade condicional do efeito. Isso nos leva à próxima seção, em que vou decompor o JavaScript para transformar strings em elementos.
Como dividir o texto
Letras, palavras, linhas etc. não podem ser animadas individualmente com CSS ou JS. Para conseguir o efeito, precisamos de caixas. Se quisermos animar cada letra, cada letra precisa ser um elemento. Se quisermos animar cada palavra, cada palavra precisa ser um elemento.
- Criar funções utilitárias JavaScript para dividir strings em elementos
- Orquestrar o uso desses utilitários
Função utilitária de divisão de letras
Um bom jeito de começar é com uma função que usa uma string e retorna cada letra em uma matriz.
export const byLetter = text =>
[...text].map(span)
A sintaxe spread do ES6 ajudou muito a tornar essa tarefa rápida.
Função utilitária de divisão de palavras
Semelhante à divisão de letras, essa função usa uma string e retorna cada palavra em uma matriz.
export const byWord = text =>
text.split(' ').map(span)
O método
split()
em strings JavaScript permite especificar quais caracteres devem ser cortados.
Passei um espaço vazio, indicando uma divisão entre as palavras.
Como fazer a função utilitária de caixas
O efeito exige caixas para cada letra, e vemos nessas funções que
map()
está sendo chamado com uma função span()
. Esta é a função span()
.
const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}
É importante observar que uma propriedade personalizada chamada --index
está sendo definida com
a posição da matriz. Ter as caixas para as animações de letra é ótimo, mas
ter um índice para usar no CSS é uma adição aparentemente pequena com um grande impacto.
O mais notável nesse grande impacto é
o escalonamento.
Poderemos usar --index
como uma forma de deslocar animações para uma aparência
escalonada.
Conclusão dos utilitários
O módulo splitting.js
foi concluído:
const span = (text, index) => {
const node = document.createElement('span')
node.textContent = text
node.style.setProperty('--index', index)
return node
}
export const byLetter = text =>
[...text].map(span)
export const byWord = text =>
text.split(' ').map(span)
Em seguida, vamos importar e usar as funções byLetter()
e byWord()
.
Orquestração dividida
Com os utilitários de divisão prontos para uso, juntar tudo isso significa que:
- Como descobrir quais elementos dividir
- Dividir e substituir texto por HTML
Depois disso, o CSS assume o controle e anima os elementos / caixas.
Elementos da descoberta
Escolhi usar atributos e valores para armazenar informações sobre a animação
desejado e como dividir o texto. Eu gostei de colocar essas
opções declarativas no HTML. O atributo split-by
é usado no JavaScript para encontrar
elementos e criar caixas para letras ou palavras. O atributo
letter-animation
ou word-animation
é usado no CSS para segmentar elementos
filhos e aplicar transformações e animações.
Aqui está um exemplo de HTML que demonstra os dois atributos:
<h1 split-by="letter" letter-animation="breath">animated letters</h1>
<h1 split-by="word" word-animation="trampoline">hover the words</h1>
Como encontrar elementos no JavaScript
Usei a sintaxe do seletor CSS para presença de atributo para reunir a lista de elementos que querem dividir o texto:
const splitTargets = document.querySelectorAll('[split-by]')
Como encontrar elementos no CSS
Também usei o seletor de presença de atributo no CSS para dar a todas as animações de letra os mesmos estilos básicos. Mais tarde, vamos usar o valor do atributo para adicionar estilos mais específicos para conseguir um efeito.
letter-animation {
@media (--motionOK) {
/* animation styles */
}
}
Dividindo o texto no lugar
Para cada um dos destinos divididos encontrados no JavaScript, vamos dividir o texto
com base no valor do atributo e mapear cada string para um <span>
. Podemos
substituir o texto do elemento pelas caixas que criamos:
splitTargets.forEach(node => {
const type = node.getAttribute('split-by')
let nodes = null
if (type === 'letter') {
nodes = byLetter(node.innerText)
}
else if (type === 'word') {
nodes = byWord(node.innerText)
}
if (nodes) {
node.firstChild.replaceWith(...nodes)
}
})
Conclusão da orquestração
index.js
em conclusão:
import {byLetter, byWord} from './splitting.js'
const {matches:motionOK} = window.matchMedia(
'(prefers-reduced-motion: no-preference)'
)
if (motionOK) {
const splitTargets = document.querySelectorAll('[split-by]')
splitTargets.forEach(node => {
const type = node.getAttribute('split-by')
let nodes = null
if (type === 'letter')
nodes = byLetter(node.innerText)
else if (type === 'word')
nodes = byWord(node.innerText)
if (nodes)
node.firstChild.replaceWith(...nodes)
})
}
O JavaScript pode ser lido no seguinte inglês:
- Importe algumas funções auxiliares.
- Verifica se o movimento está ok para esse usuário. Se não, não faz nada.
- Para cada elemento que você quer dividir.
- Divida-os de acordo com a preferência deles.
- Substituir texto por elementos.
Como dividir animações e transições
A manipulação de documentos de divisão acima liberou uma infinidade de animações e efeitos em potencial com CSS ou JavaScript. Há alguns links na parte de baixo deste artigo para ajudar a dividir seu potencial.
É hora de mostrar o que você sabe! vou compartilhar quatro animações e transições orientadas por CSS. 🤓
Dividir letras
Como base para os efeitos de letras divididas, achei o CSS a seguir
útil. Coloquei todas as transições e animações atrás da consulta de mídia de movimento e
depois dei a cada nova letra filha span
uma propriedade de exibição e um estilo para saber
o que fazer com espaços em branco:
[letter-animation] > span {
display: inline-block;
white-space: break-spaces;
}
O estilo de espaços em branco é importante para que os spans que são apenas um espaço não sejam colapsados pelo mecanismo de layout. Agora, vamos falar sobre as coisas divertidas com estado.
Exemplo de transição de letras divididas
Este exemplo usa transições CSS para o efeito de texto dividido. Com as transições, precisamos de estados para que o mecanismo funcione, e escolhi três estados: sem passar o cursor, passar o cursor na frase ou em uma letra.
Quando o usuário passa o cursor sobre a frase, ou seja, o contêiner, eu reduzo o tamanho de todos os elementos filhos como se o usuário os tivesse afastado. Então, quando o usuário passa uma letra, eu a trago adiante.
@media (--motionOK) {
[letter-animation="hover"] {
&:hover > span {
transform: scale(.75);
}
& > span {
transition: transform .3s ease;
cursor: pointer;
&:hover {
transform: scale(1.25);
}
}
}
}
Exemplo de animação de letras divididas
Este exemplo usa uma animação @keyframe
predefinida para animar infinitamente cada
letra, além de aproveitar o índice de propriedade personalizada inline para criar um efeito
escalonado.
@media (--motionOK) {
[letter-animation="breath"] > span {
animation:
breath 1200ms ease
calc(var(--index) * 100 * 1ms)
infinite alternate;
}
}
@keyframes breath {
from {
animation-timing-function: ease-out;
}
to {
transform: translateY(-5px) scale(1.25);
text-shadow: 0 0 25px var(--glow-color);
animation-timing-function: ease-in-out;
}
}
Dividir palavras
O Flexbox funcionou como um tipo de contêiner para mim nesses exemplos, usando
bem a unidade ch
como uma boa lacuna.
word-animation {
display: inline-flex;
flex-wrap: wrap;
gap: 1ch;
}
Exemplo de transição de palavras divididas
Neste exemplo de transição, uso o cursor novamente. Como o efeito inicialmente oculta o conteúdo até o passar do cursor, garanti que a interação e os estilos fossem aplicados apenas se o dispositivo tivesse a capacidade de passar o cursor.
@media (hover) {
[word-animation="hover"] {
overflow: hidden;
overflow: clip;
& > span {
transition: transform .3s ease;
cursor: pointer;
&:not(:hover) {
transform: translateY(50%);
}
}
}
}
Exemplo de animação de palavras divididas
Neste exemplo de animação, uso o CSS @keyframes
novamente para criar uma animação
infinita escalonada em um parágrafo normal de texto.
[word-animation="trampoline"] > span {
display: inline-block;
transform: translateY(100%);
animation:
trampoline 3s ease
calc(var(--index) * 150 * 1ms)
infinite alternate;
}
@keyframes trampoline {
0% {
transform: translateY(100%);
animation-timing-function: ease-out;
}
50% {
transform: translateY(0);
animation-timing-function: ease-in;
}
}
Conclusão
Agora que você sabe como eu fiz isso, como faria?! 🙂
Vamos diversificar nossas abordagens e aprender todas as maneiras de criar na Web. Crie um Codepen ou hospede sua própria demonstração, envie um tweet para mim e vou adicionar à seção "Remixes da comunidade" abaixo.
Origem
Mais demonstrações e inspirações
Remixes da comunidade
- Componente da Web
<text-hover>
por gnehcwu no CodeSandbox