Utilidades · Activación por viewport

Run y Run Back (movimiento ligado al scroll)

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

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.

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.

Prueba interactiva

El efecto se activa al entrar en el viewport

RUNContenido visibleEl efecto se activa al entrar en el viewport.

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.

Composición

Un activador y un efecto

El activador define cuándo progresa; el efecto define qué transformación se ve.

01Activador.run

02Efecto.fade-up

03Resultadoentrada 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

<section class="run fade-up">Contenido</section>
<section class="run-back zoom-in-left">Contenido</section>

Atributos originales

<section data-Qy-r="fade-up">Contenido</section>
<section data-Qy-rb="zoom-in-left">Contenido</section>

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.

Recomendaciones

Una intención clara por elemento

Combina dos piezas

Usa un solo activador y un solo efecto por elemento.

Run para revelar

Elige Run cuando el estado final deba permanecer visible.

Run Back para revertir

Úsalo cuando la salida de pantalla también deba comunicar movimiento.

Contenido primero

El fallback y prefers-reduced-motion mantienen el contenido accesible.