Curso gratuito de CSS
CSS

Scroll
Snap

↓ VERTICAL → HORIZONTAL → VERTICAL → HORIZONTAL

↓ SCROLL
01
DISEÑO

Brand
Identity

Sistema visual completo con tipografía, color y componentes.

→ SWIPE
02
DESARROLLO

Web
App

Aplicación full-stack con React, Node y PostgreSQL.

03
MOTION

3D
Animation

Escenas interactivas con Three.js y shaders personalizados.

04
CSS

Scroll
Magic

Experiencias de scroll sin JavaScript, solo CSS nativo.

⚡
PERFORMANCE

Cero
JavaScript

Todo lo que ves en esta página usa únicamente CSS nativo. Sin librerías, sin bundle, sin JS.

↓ SIGUIENTE
🎯
PRECISIÓN

Scroll
Snap

scroll-snap-type controla el eje y la obligatoriedad. mandatory significa que siempre snappea.

↓ SIGUIENTE
🔀
FLEXIBILIDAD

Anida
los ejes

Un contenedor con scroll-snap vertical puede contener hijos con scroll-snap horizontal.

↓ GALERÍA
🌊
GALERÍA — 01/03

Fluido
como el agua

Las transiciones son instantáneas, controladas por el navegador de forma nativa.

→ SWIPE
🔥
GALERÍA — 02/03

Sin
fricciones

scroll-snap-stop: always obliga a detenerse en cada item, evitando que se salte cards.

⭐
GALERÍA — 03/03

Solo
CSS

scroll-snap-type: x mandatory en el contenedor. scroll-snap-align: start en los hijos.

Solo
CSS 🎉

SCROLL SNAP — SIN UNA LÍNEA DE JS

scroll-snap-type