CST - Marquee de Marcas (Scroll Infinito)

Esta seção fornece uma barra horizontal de logos com scroll infinito e contínuo, projetada para destacar marcas parceiras, fornecedores ou selos de confiança. Ela é construída com foco total em performance, utilizando animações CSS nativas para garantir suavidade e carregamento instantâneo.

Funcionalidades

• Scroll Infinito Sem Fim: Lógica Liquid que duplica os itens automaticamente para garantir que não existam "buracos" ou saltos no movimento.
• Zero JavaScript: Todo o movimento é controlado por CSS (@keyframes), o que evita peso extra no carregamento da página (PageSpeed 100/100).
• Pause on Hover: A animação pausa automaticamente quando o usuário passa o mouse, permitindo que ele clique em links sem dificuldade.
• Responsividade Nativa: Ajustes independentes de altura de logo para Desktop e Mobile para garantir o melhor visual em qualquer tela.
• Links Opcionais: Cada logo pode ser transformado em um link clicável.

Onde Encontrar o Arquivo

1. Seção Única: sections/cst-marquee-marcas.liquid (Contém HTML, CSS escopado e Schema).

Como Configurar

Para adicionar e configurar a seção:

1. Acesse o Personalizar Tema.
2. Clique em Adicionar Seção e procure por "CST - Marquee de Marcas".
3. Adicione os blocos de Logo inserindo a imagem e o link (opcional).

Configurações de Estilo:

• Cor de Fundo: Escolha a cor que melhor se adapta ao layout da sua página.
• Velocidade da Animação: Controle quanto tempo (em segundos) o ciclo leva para completar. Valores menores tornam a animação mais rápida.
• Altura dos Logos (Desktop/Mobile): Ajuste o tamanho fixo da altura para que todos os logos fiquem alinhados horizontalmente.
• Espaçamento (Gap): Controle a distância entre uma imagem e outra.

Detalhes Técnicos (Para Desenvolvedores)

Lógica do Loop Infinito

Diferente de sliders tradicionais que voltam ao início abruptamente, esta seção utiliza a técnica de duplicação de conteúdo:

1. O Liquid captura todos os blocos de logo em uma variável.
2. Essa variável é renderizada duas vezes lado a lado dentro de um container flexível.
3. A animação CSS move o container de 0 para -50%. No exato momento em que atinge -50%, o ciclo reinicia, criando a ilusão de um movimento eterno e fluido.

Aceleração por Hardware

A animação utiliza a propriedade transform: translateX(), que solicita que o navegador utilize o processamento da GPU (placa de vídeo) em vez da CPU, resultando em 60fps constantes sem travamentos.

CSS Scoped

Todos os estilos são prefixados com .cst-marquee-{{ section.id }}, o que permite que você use múltiplas instâncias dessa seção na mesma página com configurações diferentes sem que uma afete a outra.

Solução de Problemas (Troubleshooting)

Os logos parecem "cortados" ou distorcidos:

• Certifique-se de que a imagem original do logo tenha um fundo transparente (PNG ou SVG) e que as margens brancas ao redor do desenho sejam mínimas.

O scroll está muito rápido:

• No editor de temas, aumente o valor do campo "Velocidade da Animação". Recomendamos entre 20s e 40s para um movimento suave e legível.

Existe um espaço vazio no final da animação:

• Isso geralmente acontece quando há poucos logos (menos de 4 ou 5). Adicione mais logos ou aumente o espaçamento entre eles para preencher a largura da tela.