Como ele é
Imagine um título escrito em duas metades, com um espaço fechado entre elas. Quando o mouse passa por cima, esse espaço se abre na largura: a mídia cresce de zero até o tamanho definido em cerca de 0,4 segundo, e as duas partes do texto deslizam para os lados para acomodar a imagem, sem pulos. Ao tirar o mouse, tudo se fecha de novo. No modo por visibilidade, a abertura acontece uma vez, quando metade do componente entra na tela. A mídia pode ser foto ou vídeo mudo em loop, cortada proporcionalmente para caber no quadro. Na demo, uma frase em letras finas e minúsculas abre uma foto quadrada pequena.
Você pode estar procurando isto se pediu algo assim
- título que abre espaço para uma foto no meio da frase quando passo o mouse
- palavras que se afastam e mostram uma imagem entre elas
- frase com um vídeo pequeno aparecendo no meio do texto
- efeito editorial de revista no título do site
- headline com imagem que surge quando a pessoa rola até ela
- deixar o manifesto da marca com cara de editorial de moda
Também chamado de
- foto no meio da frase
- inline image reveal
- texto com imagem no meio
- headline media reveal
- image between words
- título editorial animado
Quando usar
- Hero de marca, estúdio ou agência com uma frase curta de impacto
- Manifestos e páginas sobre nós com tom editorial
- Lançamento de produto em que uma foto pequena ilustra a frase
- Portfólios de moda, design e fotografia
Quando evitar
- Títulos longos, já que o efeito foi pensado para uma frase curta em duas partes
- Público que acessa mais pelo celular com o gatilho de hover; nesse caso, prefira o modo por visibilidade
Como pedir para a sua IA
Crie um título editorial no hero em que a frase se divide em duas partes e uma foto pequena se abre entre elas quando a pessoa passa o mouse, com abertura ao entrar na tela no celular, texto alternativo na imagem e versão estática para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Parêntese
Parêntese funciona no celular?
Funciona melhor no modo por visibilidade. Parêntese tem três gatilhos: passar o mouse, entrar na tela ou comando por código, pelos métodos animate e reset. Como o celular não tem hover, use o gatilho de visibilidade, que abre a mídia quando metade da frase aparece. Na demo, a foto encolhe de 100 para 30 pixels em telas estreitas.
Dá para usar vídeo em Parêntese?
Sim. Parêntese aceita imagem ou vídeo pela prop mediaType. O vídeo começa sozinho, mudo, em loop e dentro da página, e pode ter uma imagem de capa enquanto carrega. A mídia é cortada proporcionalmente para preencher o espaço aberto, e o tamanho final você define nas classes do contêiner da mídia.
O leitor de tela entende Parêntese?
Parêntese mostra o texto como elementos reais, então o leitor de tela lê a frase normalmente. Por padrão, o texto alternativo da imagem repete a frase inteira, o que faz o título ser ouvido duas vezes; troque por uma descrição curta da foto pela prop alt.
