Capacidad C22 · Nivel 3

Arrastras las imágenes y siguen moviéndose al soltar.

Es el efecto de makemepulse, la referencia que más te gustó de las diez. Medido: no usa WebGL. Y comprobado aquí: tampoco necesita GSAP.

Qué tienes que mirar:
  1. Agarra una imagen con el ratón y arrastra. La fila se mueve contigo.
  2. Suelta en movimiento. La fila sigue sola y se va frenando: eso es la inercia.
  3. Toca los tres controles de abajo mientras arrastras. Son los números que deciden si se siente bien, y esa decisión es tuya, no mía.
  4. Prueba también con la rueda del ratón y con las flechas del teclado — funcionan solas, sin código extra. Ver la nota de la derecha.
Pieza 1
01 · Vertical
Pieza 2
02 · Apaisada
Pieza 3
03 · Vertical
Pieza 4
04 · Cuadrada
Pieza 5
05 · Vertical
Pieza 6
06 · Apaisada
Pieza 7
07 · Vertical
Pieza 8
08 · Apaisada
Los tres números — decides tú

Cuánto tarda en pararse tras soltar. Bajo = frena en seco. Alto = patina y se pasa de largo.

Cuánto se mueve la fila por cada píxel de ratón. 1,00 es que la imagen se pega al cursor. Más de 1 se siente rápido; menos, pesado.

Cuánta velocidad se conserva al soltar. En 0 no hay inercia: se para donde lo dejas.

Por qué esto no es un carrusel cualquiera

  • Se mueve el scroll real, no un transform. Por eso el trackpad, la rueda, el táctil y las flechas del teclado funcionan sin una línea de código extra.
  • Y por eso es accesible por defecto. Un lector de pantalla ve una lista de figuras normal. La versión con transform se ve igual y rompe las cuatro cosas.
  • Sin inercia no se rompe: queda un carrusel con scroll normal. La degradación no hubo que diseñarla — sale de la arquitectura.
  • Peso: 8 imágenes = 13,9 KB. El JavaScript son ~45 líneas. Cero librerías.