Categorias do Site

A Revista do Profissional Web

Eventos de rolagem JavaScript para animações

Descubra como os novos eventos de rolagem JavaScript melhoram animações e controle dinâmico no Chrome 129 e superior.

UI/UX DesignDesenvolvimento Web
Logotipo amarelo com as letras

Usuários do Chrome 129 e superiores agora podem acessar os novos eventos de rolagem JavaScript — scrollsnapchange e scrollsnapchanging. Esses eventos oferecem controle dinâmico do recurso de rolagem CSS.

scrollsnapchanging

JavaScript icon over teal background.

Este evento é acionado durante um gesto de rolagem quando o navegador identifica um novo alvo de rolagem que será selecionado ao término da rolagem.

scrollsnapchange

Este evento é acionado apenas quando um gesto de rolagem resulta em um novo alvo de rolagem sendo definido, ocorrendo imediatamente após a parada da rolagem.

Como os eventos de rolagem são implementados?

Os eventos de rolagem funcionam em conjunto com as propriedades de rolagem CSS e são geralmente atribuídos a um contêiner pai que contém os alvos de rolagem.

Explorando casos de uso únicos e demos

Esses eventos permitem um controle preciso sobre animações durante a rolagem ativa e ao atingir um alvo de rolagem.

Este caso de uso apresenta carrosséis com rolagem horizontal que animam o conteúdo de cada slide quando se tornam o alvo atual de rolagem.

Reprodução automática de trailers ao rolar

Semelhante a vídeos do Instagram Reels e TikTok, essa funcionalidade consiste em vídeos curtos que são reproduzidos automaticamente ao serem exibidos.

Scrollytelling dinâmico

Uma página interativa que exibe diferentes “animações de rolagem” quando seções são exibidas.

Compatibilidade do navegador

Navegadores modernos começam a suportar esses novos eventos, mas atualmente estão limitados ao Chrome 129 e superior e Edge.

<img loading="lazy" decoding="async" data-attachment-id="199609" data-permalink="https://blog.logrocket.com/javascript-scroll-snap-events-scroll-triggered-animations/attachment/browser-compatibility-snapevent-api/" data-orig-file="https://blog.logrocket.com/wp-content/uploads/2025/01/browser-compatibility-snapevent-api.png" data-orig-size="895,369" data-comments-opened="1" data-image-meta="{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}" data-image-title="browser-compatibility-snapevent-api" data-image-description="" data-image-caption="

Sourced from caniuse.com

” data-medium-file=”https://blog.logrocket.com/wp-content/uploads/2025/01/browser-compatibility-snapevent-api.png?w=300″ data-large-file=”https://blog.logrocket.com/wp-content/uploads/2025/01/browser-compatibility-snapevent-api.png?w=895″ class=”wp-image-199609 size-large” src=”https://blog.logrocket.com/wp-content/uploads/2025/01/browser-compatibility-snapevent-api.png?w=895″ alt=”Compatibilidade do navegador para snapevent-api” width=”895″ height=”369″ srcset=”https://blog.logrocket.com/wp-content/uploads/2025/01/browser-compatibility-snapevent-api.png 895w, https://blog.logrocket.com/wp-content/uploads/2025/01/browser-compatibility-snapevent-api.png?resize=300,124 300w, https://blog.logrocket.com/wp-content/uploads/2025/01/browser-compatibility-snapevent-api.png?resize=768,317 768w” sizes=”auto, (max-width: 895px) 100vw, 895px” />

Sourced from caniuse.com

  • Aplicando o favo de UX em sites modernos

    Descubra como o favo de UX pode otimizar o design de sites, garantindo experiências significativas e centradas no usuário.

    Descubra como o favo de UX pode otimizar o design de sites, garantindo experiências significativas e centradas no usuário.

    Ler notícia completa
    Ícone estilizado de uma abelha com favos de mel sobre um fundo circular lilás e desfocado.

  • Melhores Ações de Glitch no Photoshop 2025

    Descubra as melhores ações de glitch para Photoshop em 2025 e transforme suas fotos com efeitos digitais únicos e inovadores.

    Descubra as melhores ações de glitch para Photoshop em 2025 e transforme suas fotos com efeitos digitais únicos e inovadores.

    Ler notícia completa
    Arte digital de um astronauta com traje espacial flutuando num fundo abstrato colorido, representando o espaço com detalhes de glitch e o logo do Photoshop no canto.

  • Gestão eficaz de equipes de design: dicas práticas

    Aprenda a gerenciar equipes de design com eficácia, equilibrando comunicação, inspiração e autonomia para resultados excepcionais.

    Aprenda a gerenciar equipes de design com eficácia, equilibrando comunicação, inspiração e autonomia para resultados excepcionais.

    Ler notícia completa
    Ilustração de três figuras humanas estilizadas, dispostas em forma de pirâmide sobre um fundo abstrato em tons de cinza.

  • O que é Vibe Coding? Descubra essa tendência

    Com a IA se integrando cada vez mais em nossas ferramentas e fluxos de trabalho, o design de experiência está entrando em uma nova era—menos sobre wireframes e mais sobre sensações. Neste episódio de Invisible Machines, o especialista em design Tim Wood (Meta, Amazon Q Developer) retorna ao podcast para explorar a ascensão do design […]

    Design com IA evolui para além dos wireframes, focando em 'vibe coding'. Entenda essa nova era do design digital.

    Ler notícia completa
    Banner de podcast com título

  • 20 Fontes Futuristas Gratuitas para Design Moderno

    As fontes futuristas são caracterizadas por suas formas geométricas e linhas limpas, o que contribui para uma estética moderna e elegante. Elas transformam tipografias básicas em algo mais inovador. Essas fontes adicionam um toque estiloso e contemporâneo aos trabalhos, sendo ideais para projetos que lidam com ideias futuristas ou que buscam apresentar uma imagem ultra-moderna. […]

    Descubra 20 fontes futuristas gratuitas para dar um toque moderno e inovador aos seus projetos de design.

    Ler notícia completa
    Imagem de fundo cósmico com tonalidades de azul e rosa representando o espaço, contendo a palavra

  • 6 Melhores Plugins de Blocos Gutenberg para WordPress

    Uma das características mais promissoras do editor de blocos Gutenberg é a capacidade de adicionar blocos personalizados. Eles podem incluir praticamente qualquer tipo de conteúdo ou funcionalidade que você imaginar. Embora você possa criar seus próprios blocos personalizados, às vezes isso é como reinventar a roda, especialmente quando deseja adicionar elementos comuns, como testemunhos ou […]

    Descubra os 6 melhores plugins de blocos Gutenberg para criar páginas incríveis no WordPress.

    Ler notícia completa
    Interface de usuário de um software com um campo de pesquisa e ícones de recursos como

  • Navegação na Internet para Pessoas Cegas

    Sylvie Duchateau é consultora de acessibilidade digital há mais de 20 anos. Após trabalhar em associações como BrailleNet e na cooperativa Access42, ela decidiu se tornar freelancer. Sylvie é especialista em leitores de tela, oferece treinamentos e testes de acessibilidade, e é voluntária na conferência Paris Web desde 2021. Nos conhecemos na edição de 2024 […]

    Sylvie Duchateau fala sobre desafios e soluções para acessibilidade digital de pessoas cegas na web.

    Ler notícia completa
    Mulher sorridente abraça labrador bege em ambiente interno com plantas ao fundo.

  • Guia de Estilo vs. Sistema de Design: Diferenças

    Embora muitos designers usem guias de estilo e sistemas de design de forma intercambiável, eles são ferramentas distintas com suas próprias forças e fraquezas. Compreender suas diferenças é crucial para evitar impactos negativos no processo de design e desenvolvimento de produtos. Um guia de estilo é um documento que apresenta diretrizes para manter a consistência […]

    Entenda as diferenças entre guias de estilo e sistemas de design e como usá-los no design de produtos.

    Ler notícia completa
    Ícone estilizado de um computador exibindo uma imagem de documento com texto e caixas de marcação, acompanhado de um lápis, sobre fundo texturizado azul.

  • Novas Ferramentas para Designers em Abril 2025

    A temporada de projetos está em alta, e novas ferramentas estão surgindo para ajudar designers a gerenciar fluxos de trabalho com eficiência. Esta seleção inclui algumas novidades que prometem manter sua motivação em alta. Confira as novidades para designers: Smart Keys Smart Keys é uma ferramenta para Mac que melhora a escrita com atalhos de […]

    Descubra as ferramentas inovadoras para designers, como Smart Keys e UX Audit Now, para otimizar seu fluxo de trabalho.

    Ler notícia completa
    Homem jovem com óculos escuros se funde com o texto