Uma marquise é um conteúdo que rola continuamente em uma direção e nunca para: sem setas, sem pontos, sem limites de slides O antigo <marquee> A tag HTML está morta há anos, mas o efeito voltou por volta de 2021 e agora está em metade dos sites da agência que você visitará.
Três maneiras de construir uma no Elementor: a gratuita Widget Logo Slider para logotipos, o Ticker Notícias para texto, ou cerca de doze linhas de CSS se você quiser em algo que os widgets não cobrem Uma marquise é realmente um widget carrossel com as paradas removidas, por isso dois dos três métodos começam de um Todos os três abaixo, com o detalhe que decide se o seu faz loop de forma limpa ou visivelmente se encaixa.
A única coisa que faz uma marquise parecer quebrada
Comece aqui, porque é a razão pela qual a maioria das marquises feitas à mão parece errada.
Uma marquise é uma tira de conteúdo que desliza para a esquerda até ficar fora da tela, depois salta de volta para o início Se houver apenas uma cópia do conteúdo, você obtém uma lacuna A cauda sai, e há espaço vazio até que a cabeça volte a girar.
A correção é duplicar a faixa Duas cópias idênticas lado a lado, animadas em toda a largura de exatamente uma cópia Quando a animação é reiniciada, a cópia dois está sentada precisamente onde a cópia um estava, e o salto é invisível.
É isso É toda a técnica Toda marquise que você viu que faz loops sem problemas é fazer isso, e todo aquele que gagueja não é.
Método 1: Marquise de logotipo com o controle deslizante de logotipo gratuito
Se você estiver rolando logotipos de clientes, que é para isso que serve a maioria das marquises, o Widget do controle deslizante de logotipo faz sem CSS Está no plugin gratuito.
- Arraste o controle deslizante de logotipo para a página e adicione seus logotipos no repetidor, uma linha cada, com um link opcional.
- Configurações do carrossel aberto e ligue o Autoplay e depois o Infinite Loop.
- Defina o atraso de reprodução automática como 0. Este é o interruptor que transforma um carrossel em uma marquise Um atraso de zero significa que ele nunca faz uma pausa em um slide, então o movimento se torna contínuo em vez de escalonado.
- Defina a velocidade para algo lento, 4000 a 6000 ms. As marquises leem como calmas quando são mais lentas do que seria de esperar As rápidas parecem um estado de erro.
- Desligue setas e pontos. A navegação em uma marquise é contraditória; não há nada para navegar.
- Desligue a pausa no pavimento se você quiser que seja verdadeiramente contínuo, ou deixe ligado se os logotipos estiverem clicáveis.
Slides-per-view controla a densidade Seis no desktop, três no tablet, dois no celular mantém os logotipos legíveis Não caia para um, porque uma marquise mostrando um único logotipo de cada vez deixa de ler como uma tira.
Mais sobre tiras de logotipo de estilo, incluindo o tratamento de pairar em escala de cinza e como equilibrar tamanhos de logotipo incompatíveis: o passo a passo do carrossel do logotipo. Para o que mais está no nível livre, consulte a quebra de widget carrossel grátis.
Método 2: Marquise de texto com News Ticker
Para rolagem de texto (anúncios, manchetes, uma tira de tique-taque) o widget News Ticker é a opção construída propositadamente É um widget Pro.
Ele lida com as coisas que uma marquise de texto enrolada à mão erra: ele pode puxar de uma consulta de postagem em vez de uma lista estática, então um ticker “latest news” se atualiza e tem um bloco de rótulo fixo à esquerda que permanece colocado enquanto o conteúdo passa por ele Esse rótulo é o detalhe que faz um ticker ser lido como um ticker e não como um texto à deriva.
Defina a direção, velocidade e comportamento de pausa nas configurações do widget Duas coisas que valem a pena fazer:
- Pausa ao passar o mouse, ligado. Se as manchetes são links, as pessoas precisam de um alvo estacionário.
- Mantenha os itens curtos. Um ticker com manchetes de 90 caracteres leva tanto tempo para circular que ninguém vê o item quatro. Truncar para cerca de 50 caracteres.
Se o que você realmente deseja é mover o texto sem o pergaminho, um título onde as palavras giram no lugar, o Widget de manchetes animados é o ajuste mais próximo do que qualquer marquise.
Método 3: Construa um com CSS
Para qualquer coisa que os widgets não cobrem (uma tira de citações de depoimentos, uma linha de ícones, conteúdo misto) uma marquise é de doze linhas de CSS Coloque a marcação em um widget HTML e o CSS no campo CSS personalizado do Elementor ou no tema filho.
<div class="ma-marquee">
<div class="ma-marquee__track">
<span>Item one</span><span>Item two</span><span>Item three</span>
<span>Item one</span><span>Item two</span><span>Item three</span>
</div>
</div>Observe que o conteúdo aparece duas vezes Essa é a faixa duplicada de antes, não um erro de copiar e colar.
.ma-marquee {
overflow: hidden;
}
.ma-marquee__track {
display: flex;
gap: 3rem;
width: max-content;
animation: ma-scroll 30s linear infinite;
}
.ma-marquee:hover .ma-marquee__track {
animation-play-state: paused;
}
@keyframes ma-scroll {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ma-marquee__track { animation: none; }
}Quatro coisas aí são importantes:
translateX(-50%)move a faixa exatamente pela largura de uma cópia, porque a faixa tem duas cópias É isso que torna o loop invisível.linear, nãoease. Uma marquise facilitada acelera e desacelera a cada ciclo, o que parece um bug.width: max-contentinterrompe o envolvimento da pista flexível.- A consulta de movimento reduzido não é opcional O movimento horizontal contínuo é uma enxaqueca documentada e um gatilho vestibular, e uma marquise é o único infrator mais comum na web moderna Honre o cenário.
Para inverter a direção, animar de translateX(-50%) para 0. Para vertical, troque por translateY e defina a altura do recipiente.
Quão rápido uma marquise deve se mover?
Mais lento do que o instinto diz Um bom ponto de partida é 30 segundos para um ciclo completo de uma faixa de seis itens, que parece quase muito lento no editor e parece confiante em uma página ao vivo.
O teste: um visitante pode ler um item sem rastreá-lo com os olhos? se ele tiver que seguir o movimento, é muito rápido, e toda a tira se torna algo para desviar o olhar.
Os logotipos podem ir mais rápido que o texto, porque um logotipo é reconhecido em vez de lido O texto precisa aproximadamente do dobro do tempo de permanência Um carrossel escalonado é o caso oposto, onde a reprodução automática geralmente é um erro porque os itens são clicáveis.
Uma marquise é ruim para SEO ou acessibilidade?
SEO, não. O conteúdo é texto real no DOM, rastreável e indexável Duplicar a faixa significa que o texto aparece duas vezes na fonte, o que vale a pena estar ciente, mas não é um problema de conteúdo duplicado nesta escala, porque é um punhado de palavras dentro de um elemento Se isso incomoda, marque a segunda cópia aria-hidden="true", o que você deve fazer de qualquer maneira.
A acessibilidade é a verdadeira consideração e há três questões genuínas:
- Sensibilidade ao movimento. Lidado pela consulta de movimento reduzido acima. Não negociável.
- Movendo alvos de links. Se os itens forem clicáveis, pause no hover e no foco Um link que desliza para longe enquanto alguém o alcança falha nas expectativas de tamanho alvo da WCAG 2.2 em espírito, se não na letra.
- Leitores de tela lendo duas vezes. A faixa duplicada é anunciada duas vezes, a menos que você oculte a segunda cópia da árvore de acessibilidade Um atributo a corrija.
Nada disso faz de uma marquise uma má ideia Faz de uma não configurada uma má ideia.
Perguntas frequentes
Elementor tem um widget de marquise?
Não no núcleo Elementor não tem marquise dedicada ou widget ticker em qualquer plugin gratuito ou Pro Você obtém o efeito de um addon (o Deslizador de Logotipo gratuito com atraso de reprodução automática definido como zero, ou o Ticker de Notícias para rolagem de texto) ou escrevendo o CSS você mesmo Nada aqui é vendido como um widget marquise; o Ticker de Notícias (Pro) é a coisa mais próxima construída propositadamente, uma vez que rolar continuamente é o que serve, mas é moldado em torno de tiras de manchete em vez de conteúdo arbitrário.
Como faço rolagem de texto continuamente no Elementor?
Duas opções. O widget News Ticker lida com configurações, incluindo a retirada de manchetes de uma consulta de postagem. Ou adicione um widget HTML com uma faixa de conteúdo duplicada e uma animação de quadro-chave CSS translateX para -50% em um loop infinito linear.
Por que minha marquise pula ou gagueja quando dá uma volta?
A faixa não está duplicada, ou a distância da animação não corresponde à largura de uma cópia Uma marquise precisa de duas cópias idênticas do conteúdo e uma animação que se mova exatamente 50% da largura total da faixa Qualquer outra distância e você verá um snap visível em cada ciclo.
Como faço para pausar uma marquise ao passar o mouse?
Com o widget Logo Slider é um alternar nas Configurações do Carrossel No CSS é animation-play-state: paused ao passar o mouse do recipiente Adicionar :focus-within ao lado :hover assim, os usuários de teclado recebem a mesma pausa.
Posso fazer uma marquise vertical no Elementor?
Sim. Animar translateY em vez de translateX, definir uma altura de recipiente fixo, e empilhar a pista duplicada em uma coluna em vez de uma linha Marquises verticais terno tiras de testemunho e feeds de notificação melhor do que logotipos.
A tag HTML marquee ainda é suportada?
Os navegadores ainda renderizam <marquee>, mas está obsoleto há anos, não está na especificação HTML e não oferece controle sobre flexibilização, pausa ou movimento reduzido. Use animação CSS em vez disso: mesmo efeito, melhor comportamento e não desaparecerá em uma versão futura do navegador.
Qual método usar
Logos: o Logo Slider gratuito, atraso de reprodução automática zero. Feito em dois minutos e ele lida com densidade responsiva para você.
Nenhum dos vinte Construtor de widgets designs é uma marquise, então o Logo Slider continua sendo a ferramenta para este trabalho. O página preços mostra onde o News Ticker está se sendo se você quiser a versão construída especificamente.
Manchetes de rolagem: News Ticker, porque a fonte da consulta e o rótulo fixo valem a licença por conta própria.
Qualquer outra coisa: o CSS É curto, é seu, e nada pode depreciá-lo Construtores de sliders autônomos também podem fazer faixas contínuas, e a comparação do plugin deslizante cobre o que eles custam a página.
Todos os widgets de carrossel e controle deslizante, inclusive aqueles que fazem serviço de letreiro, são coletados no Widgets Carrossel Elementor página, juntamente com 20 designs de carrossel e controle deslizante importáveis8 deles gratuitos. Se a sua marquise estiver se comportando mal após uma atualização do plugin de cache, as correções serão inseridas o guia de solução de problemas do controle deslizante Swiper inscreva-se aqui também.
