General 2020s Modern Scroll-Driven

Locomotive Infinite Scroll

Estilo Locomotive Infinite Scroll com smooth scrolling, parallax multicamada e animações scroll-driven. Baseado em Locomotive Scroll v5 e Lenis. Ideal para storytelling imersivo e landing pages premium.

smooth scroll parallax infinite scroll locomotive scroll lenis scroll-driven animations viewport detection kinetic motion scroll progress CSS variables data attributes lerp interpolation scroll speed scroll hijacking immersive storytelling

Uso: Landing pages imersivas, Storytelling digital, Portfolios criativos, Sites de agências, Apresentações de produto premium, One-page narrativas

Contexto Histórico

Locomotive Scroll nasceu no estúdio canadense Locomotive.ca como solução para scroll suave e detecção de viewport. A v5 (2024) é uma reescrita completa baseada em Lenis, com apenas 9.4kB gzipped, dual IntersectionObserver, parallax via data-attributes e progress tracking via CSS variables. Representa a evolução do scroll-hijacking para scroll-enhancement acessível.

Especificações Técnicas

Cores

Primárias

#1A1A2E

#16213E

#FFFFFF

Secundárias

#6C63FF

#A29BFE

#FF6B6B

#00D2FF

#F0F0F5

Efeitos

Smooth scroll via Lenis (lerp: 0.1, duration: 1.2), parallax layers com data-scroll-speed (0.1 a 0.8), scroll progress como CSS variable (--progress 0-1), viewport detection com IntersectionObserver, fade-in/slide-up on scroll (translate3d + opacity), staggered reveal (delay incremental 100ms), horizontal scroll sections, scroll-triggered counters, kinetic typography com velocidades diferentes, sticky sections com scroll progress, easing customizado (exponential ease-out)

Light/Dark

✓ Full / ✓ Full

DESIGN.md

Prompt para AI

Relacionados

Futurista & Tech

Sumi-e Tech Scroll

Última sincronização: 01/04/2026