# Run y Run Back (movimiento ligado al scroll) > Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar. - Página canónica: https://quicklycss.cl/docs/run.php - Catálogo de API: https://quicklycss.cl/quicklycss-api.json - Índice para IA: https://quicklycss.cl/llms.txt Utilidades · Activación por viewport Activa efectos cuando el elemento entra en la ventana visible. Run avanza hasta mostrarlo; Run Back también revierte el efecto cuando sale. v2.0 R ## Nombres originales Conserva `.fade-*`, `.flip-*`, `.zoom-*` y los atributos históricos. ↕ ## CSS puro La progresión se enlaza al viewport con scroll-driven animations, sin JavaScript. ✓ ## Fallback visible Si el navegador no admite la función, el contenido permanece visible y usable. i ## Movimiento vinculado al viewport Run ejecuta el efecto una vez cuando el elemento entra en el área visible. Run Back permite repetirlo al entrar y revertirlo al salir. Código + resultado ## Compara Run y Run Back Selecciona una composición para ver el activador, el efecto y el resultado que produce sobre el elemento. HTML Resultado aplicado Viewport · entrada Prueba interactiva El efecto se activa al entrar en el viewport RUN Contenido visible El efecto se activa al entrar en el viewport. .fade-in hace aparecer el elemento mediante un cambio progresivo de opacidad. ```html
Contenido visible
``` .fade-up combina opacidad con un desplazamiento ascendente al entrar. ```html
Contenido visible
``` .zoom-in aumenta progresivamente la escala; .run-back también revierte el efecto al salir. ```html
Contenido visible
``` .slide-up — Aparece mientras se desplaza 24px hacia arriba. ```html
Contenido visible
``` .slide-right — Aparece entrando 24px desde la izquierda. ```html
Contenido visible
``` .rotate-in — Aparece corrigiendo un giro de −8° y una escala reducida. ```html
Contenido visible
``` .blur-in — Aparece eliminando progresivamente un desenfoque de 10px. ```html
Contenido visible
``` .clip-up — Revela el contenido verticalmente desde el borde inferior. ```html
Contenido visible
``` .mask-lr — Descubre el contenido mediante una máscara de izquierda a derecha. ```html
Contenido visible
``` .tilt-in — Aparece corrigiendo una inclinación y un desplazamiento vertical. ```html
Contenido visible
``` .pop-in — Aumenta la escala con un pequeño rebote antes de estabilizarse. ```html
Contenido visible
``` .shadow-in — Añade progresivamente una sombra elevada al elemento. ```html
Contenido visible
``` .reveal — Revela el contenido horizontalmente de izquierda a derecha. ```html
Contenido visible
``` Responsabilidades ## Animation controla el tiempo; Run controla el recorrido La diferencia no está en el aspecto del efecto, sino en qué hace avanzar la secuencia. TIEMPO ### Animation `.animate-fade-in` Empieza al aplicar la clase y progresa durante una duración fija. VIEWPORT · IDA ### Run `.run.fade-up` Progresa al entrar en el viewport y conserva el estado visible. VIEWPORT · IDA Y VUELTA ### Run Back `.run-back.fade-up` Entra con el scroll y revierte la secuencia cuando el elemento sale. → ## Regla rápida Si necesitas reproducir, pausar o definir milisegundos, usa [Animation](animation.md). Si el movimiento debe seguir la posición del elemento en pantalla, usa Run. Composición ## Un activador y un efecto El activador define cuándo progresa; el efecto define qué transformación se ve. 01 Activador `.run` + 02 Efecto `.fade-up` = 03 Resultado `entrada al viewport` RUN ### Entrada en una dirección `class="run fade-up"` Comienza cuando cerca del 10% del elemento entra en pantalla, avanza con el recorrido y termina visible. RUN BACK ### Entrada y salida reversibles `class="run-back fade-up"` La primera parte revela el elemento; al abandonar el viewport, la segunda parte reproduce el efecto en sentido inverso. Clases ```html
Contenido
Contenido
``` Atributos originales ```html
Contenido
Contenido
``` Ambas sintaxis son equivalentes. `data-Qy-r` representa Run y `data-Qy-rb` representa Run Back. Mapa del sistema ## Tres familias originales Elige la familia según la transformación que debe comunicar: desplazamiento, giro o escala. ¿Debe desplazarse? Usa `.fade-*` ¿Debe girar? Usa `.flip-*` ¿Debe cambiar de escala? Usa `.zoom-*` | Familia | Clase | Resultado | | --- | --- | --- | | Fade .fade-* 8 efectos | .fade-up | Aparece mientras se desplaza hacia arriba. | | .fade-down | Aparece mientras se desplaza hacia abajo. | — | | .fade-right | Aparece mientras se desplaza hacia la derecha. | — | | .fade-left | Aparece mientras se desplaza hacia la izquierda. | — | | .fade-up-right | Aparece hacia arriba y a la derecha. | — | | .fade-up-left | Aparece hacia arriba y a la izquierda. | — | | .fade-down-right | Aparece hacia abajo y a la derecha. | — | | .fade-down-left | Aparece hacia abajo y a la izquierda. | — | | Flip .flip-* 4 efectos | .flip-left | Rota 90 grados hacia la izquierda sobre el eje Y. | | .flip-right | Rota 90 grados hacia la derecha sobre el eje Y. | — | | .flip-up | Rota 90 grados hacia arriba sobre el eje X. | — | | .flip-down | Rota 90 grados hacia abajo sobre el eje X. | — | | Zoom .zoom-* 10 efectos | .zoom-in | Aparece aumentando su escala. | | .zoom-in-up | Aumenta su escala mientras entra desde abajo. | — | | .zoom-in-down | Aumenta su escala mientras entra desde arriba. | — | | .zoom-in-left | Aumenta su escala mientras entra desde la derecha. | — | | .zoom-in-right | Aumenta su escala mientras entra desde la izquierda. | — | | .zoom-out | Aparece reduciéndose desde una escala mayor. | — | | .zoom-out-up | Reduce su escala mientras se desplaza hacia arriba. | — | | .zoom-out-down | Reduce su escala mientras se desplaza hacia abajo. | — | | .zoom-out-left | Reduce su escala mientras se desplaza hacia la izquierda. | — | | .zoom-out-right | Reduce su escala mientras se desplaza hacia la derecha. | — | Run / Run Back · Extensiones v2 ## Efectos adicionales vinculados al viewport Estos efectos sí pertenecen a Run / Run Back. Utiliza cada clase junto a `.run` o `.run-back`; por sí sola sólo define el movimiento. | Clase | Propiedad principal | Resultado | | --- | --- | --- | | .slide-up | transform + opacity | Aparece mientras se desplaza 24px hacia arriba. | | .slide-right | transform + opacity | Aparece entrando 24px desde la izquierda. | | .rotate-in | transform + opacity | Aparece corrigiendo un giro de −8° y una escala reducida. | | .blur-in | filter + opacity | Aparece eliminando progresivamente un desenfoque de 10px. | | .clip-up | clip-path + opacity | Revela el contenido verticalmente desde el borde inferior. | | .mask-lr | mask | Descubre el contenido mediante una máscara de izquierda a derecha. | | .tilt-in | transform + opacity | Aparece corrigiendo una inclinación y un desplazamiento vertical. | | .pop-in | transform + opacity | Aumenta la escala con un pequeño rebote antes de estabilizarse. | | .shadow-in | box-shadow | Añade progresivamente una sombra elevada al elemento. | | .reveal | clip-path | Revela el contenido horizontalmente de izquierda a derecha. | i ## Cómo se utilizan Ejemplo de entrada: `.run.slide-up`. Ejemplo reversible: `.run-back.slide-up`. Utiliza directamente el nombre de la clase mostrado en la tabla. Recomendaciones ## Una intención clara por elemento 01 ### Combina dos piezas Usa un solo activador y un solo efecto por elemento. 02 ### Run para revelar Elige Run cuando el estado final deba permanecer visible. 03 ### Run Back para revertir Úsalo cuando la salida de pantalla también deba comunicar movimiento. 04 ### Contenido primero El fallback y `prefers-reduced-motion` mantienen el contenido accesible.