Como marcar elementos em 2022 (melhores práticas)
Publicados: 2022-08-23Este artigo discutirá as melhores maneiras de criar elementos de letreiro em movimento no design moderno da web.
Um letreiro é uma seção infinita de texto e/ou elemento visual (como imagens) que rola automaticamente horizontalmente.
Apesar do elemento HTML oficial <marquee> ser depreciado e fortemente desencorajado de ser usado, o efeito geral da rolagem, os elementos contínuos usados para incrementar uma página da web estão vivos e bem em 2022, aparecendo em muitos sites da moda.
Alguns ainda usam o elemento Marquee, que ainda é suportado por todos os navegadores, apesar de (novamente) ser desencorajado de ser usado. Por exemplo, aqui está o clássico "protetor de tela" de DVD saltitante criado com um letreiro HTML.
Isso não é inteligente, mas ainda funciona. As razões para evitar o uso desse elemento em 2022 são claras:
- Não é realmente acessível
- Está 100% depreciado e o suporte para ele pode (e provavelmente será em algum momento) removido
- Nunca foi um elemento HTML real para começar (não faz parte de nenhum padrão)
No entanto, sempre fomos fãs de marquises na Isotropic.
Dê uma olhada em muitos dos sites da moda Awwwards e você verá texto, imagens ou uma combinação de ambos movendo-se horizontalmente, assim:
Esta é uma tenda de demonstração
Claro, nunca é uma boa ideia colocar informações de missão crítica em rolagem ou seções animadas. Mas para algo como o exemplo acima, parece legal, diferencia o site e o torna memorável. Use-o com sabedoria e moderação.
Os letreiros são tão legais que até publicamos uma ferramenta útil que gerará automaticamente uma seção de estilo "ticker" de rolagem de texto usando sombras de caixa CSS. É legal, mas acho que a abordagem discutida neste artigo é ainda melhor.
O código para fazer essa demonstração de letreiro é proveniente deste CodePen de Ryan Mulligan, que é (provavelmente) a melhor maneira de fazer um efeito de letreiro em 2022. Ele também escreve sobre esse código em seu blog, https://ryanmulligan.dev/ blog/css-marquee.
É acessível (suporta prefers-reduced-motion), infinito, permite qualquer tipo de elemento html e é leve e fácil de implementar.
Também é feito com 100% CSS e sem JS.
<div class="marque">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk&q=8MzQ&ixlib='alt-1.2'>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk&q=8MzQ&ixlib='alt-1.2'>
<img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
</div>
<div class="marquee marquee--borders">
<div class="marquee__group">
<p>Os cães do Unsplash</p>
<p aria-hidden="true">Os cães do Unsplash</p>
<p aria-hidden="true">Os cães do Unsplash</p>
</div>
<div aria-hidden="true" class="marquee__group">
<p>Os cães do Unsplash</p>
<p>Os cães do Unsplash</p>
<p>Os cães do Unsplash</p>
</div>
</div>
<div class="marquee marquise--reverse">
<div class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1='2.>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
<div aria-hidden="true" class="marquee__group">
<img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1='2.>
<img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
<img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM&ixlib=rb-1.2.1&q=80&w=400' alt=''>
</div>
</div> @import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
* {
dimensionamento de caixa: caixa de borda;
}
corpo {
min-altura: 100vh;
}
corpo {
--espaço: 2rem;
exibição: grade;
alinhar-conteúdo: centro;
estouro: oculto;
lacuna: var(--espaço);
largura: 100%;
font-family: "Corben", system-ui, sans-serif;
tamanho da fonte: 1.5rem;
altura da linha: 1,5;
}
.marque {
--duração: 60s;
--gap: var(--espaço);
exibição: flexível;
estouro: oculto;
seleção do usuário: nenhum;
lacuna: var(--gap);
transformar: skewY(-3deg);
}
.marquee__group {
flex-shrink: 0;
exibição: flexível;
alinhar-itens: centro;
justificar-conteúdo: espaço ao redor;
lacuna: var(--gap);
largura mínima: 100%;
animação: scroll var(--duration) linear infinito;
}
@media (prefere movimento reduzido: reduzir) {
.marquee__group {
estado de reprodução de animação: pausado;
}
}
.marquee__group img {
largura máxima: braçadeira (10rem, 1rem + 28vmin, 20rem);
razão de aspecto: 1;
ajuste ao objeto: capa;
raio da borda: 1rem;
}
.marquee__group p {
imagem de fundo: linear-gradient(
75 graus,
hsl(240 graus 70% 49%) 0%,
hsl(253 graus 70% 49%) 11%,
hsl(267 graus 70% 49%) 22%,
hsl(280 graus 71% 48%) 33%,
hsl(293 graus 71% 48%) 44%,
hsl(307 graus 71% 48%) 56%,
hsl(320 graus 71% 48%) 67%,
hsl(333 graus 72% 48%) 78%,
hsl(347 graus 72% 48%) 89%,
hsl(0graus 73% 47%) 100%
);
-webkit-background-clip: texto;
-webkit-text-fill-color: transparente;
}
.marquee--borders {
bloco de borda: 3px sólido dodgerblue;
bloco de preenchimento: 0,75rem;
}
.marquee--reverse .marquee__group {
direção de animação: reverso;
atraso de animação: calc(var(--duration) / -2);
}
@keyframes rolagem {
0% {
transform: traduzirX(0);
}
100% {
transform: translateX(calc(-100% - var(--gap)));
}
}
Vamos dar uma olhada em como isso foi criado e por que é tão bom.
Aqui está uma visão geral, antes de analisarmos todo o código:
- Podemos controlar facilmente a velocidade e a direção do efeito de rolagem. Para velocidade, definimos
.marquee--reverse. - É modular - você pode ter quantos grupos quiser envolvendo o conteúdo em uma div com a classe de
.marqueee o conteúdo interno com.marquee__group. - O dimensionamento é responsivo e fluido, pois utiliza variáveis CSS e clamp.
- É acessível usando rótulos de ária e pausando se o movimento prefere-reduzido do CSS estiver definido como reduzido.
- O movimento é uma animação CSS padrão que usa quadros-chave (para que você possa pausar ao passar o mouse, se quiser). Não há nenhum JS em tudo.
- Também é bonito copiar/colar. Simplesmente troque seu conteúdo, implemente o HTML e o CSS, e você terá uma pequena marquise legal.
É muito bem feito e (imo) deve ser a maneira padrão de implementar um efeito de letreiro em 2022.
Aqui está o HTML:
Na demo podemos ver três letreiros. O primeiro e o terceiro são revertidos com a classe de .marquee--reverse . Eles têm uma velocidade padrão e contêm imagens.
O segundo (do meio) é todo texto e implementa bordas com uma classe personalizada. Ele também tem uma duração mais lenta definida pelo atributo style: .
Você também notará que existem essencialmente duplicatas dentro da div .marquee , que são as mesmas, exceto com uma tag aria.
Isso é para tornar a animação infinitamente infinita, além de poder se adaptar a diferentes proporções de viewport (mais sobre isso quando olhamos para o CSS).
Isso fica acessível com aria-hidden="true" , que remove o conteúdo duplicado da árvore de acessibilidade.
Além disso, as imagens são veiculadas diretamente do Unsplash. Você pode achar este recurso interessante: Como gerar imagens aleatórias por URL (Web Dev)
Em suma, é uma estrutura HTML simples e elegante.
Agora vamos ver o CSS
E aqui está o CSS (extraído diretamente do CodePen):
Podemos ver o seguinte:
- Tudo está usando REM, variáveis e grampo, o que significa que o efeito flui e reagirá ao tamanho da tela e às configurações do navegador.
- A animação é 100% CSS. Isso é implementado com a linha "
animation: scroll var(--duration) linear infinite;" em.marquee__group. A animação é infinita, linear e com rolagem nomeada. A duração da raiz é controlada pela variável--duration, que pode ser substituída para controlar a velocidade de um grupo específico na marcação HTML (mencionada acima). - Scroll é uma transformação básica, traduzindo X.
- Para reverter a animação, simplesmente temos "
animation-direction: reverse;' na classe.marquee--reverse .marquee__group. - Estamos usando calc e --gap para a maior parte do espaçamento. Isso torna as coisas fluidas e você pode alterar o Gap para atender às suas necessidades.
- Há um efeito de inclinação (3%) que o torna diagonal, que pode ser removido para torná-lo 100% horizontal.
- É acessível e responsável, pois não se moverá se preferir movimento reduzido: reduzir está definido (saiba como testar isso aqui).
Basicamente, ele faz tudo muito bem e é a melhor maneira de implementar um efeito semelhante a um letreiro de rolagem em 2022.
Para implementar, basta adicionar o HTML à sua página, trocar o texto/imagens e adicionar o CSS aos seus estilos globais.
Você pode brincar com as variáveis, mas realisticamente isso é muito plug and play... não há muito que você precise mudar!