Page transitions
En wp-admin: Fancy Animations → Page transitions. Un efecto visual que se reproduce entre cargas de página mientras un visitante navega por tu sitio, con una pantalla de carga opcional mientras la siguiente página carga.
El interruptor On/Off de arriba a la derecha enciende o apaga la función entera sin perder tu estilo ni tus colores; está apagado en una instalación nueva. El Preview de la columna lateral reproduce el estilo elegido con tus ajustes cada vez que cambias uno, y su botón Play lo repite.
Míralo en acción: Page transitions en fancyanimations.com.
Estilo
| Ajuste | Opciones | Valor por defecto |
|---|---|---|
| Transition style | Cascade, Elastic circle, Slide, Open center horizontal, Open center vertical, Circle reveal, Diagonal wipe, Corner wipe, Zoom blur | Slide |
| Duration | 0.4–1.5 s | 0.7 s |
Algunos estilos tienen una opción extra, que se muestra justo debajo de la fila del estilo elegido:
| Opción | Estilo | Opciones | Valor por defecto |
|---|---|---|---|
| Number of columns | Cascade | 2–12 | 4 |
| Slide direction | Slide | Center, Left, Right, Top, Bottom | Center |
| Wipe direction | Diagonal wipe | From left, From right | From left |
| Corner origin | Corner wipe | Top left, Top right, Bottom left, Bottom right | Top left |
| Zoom direction | Zoom blur | Zoom in, Zoom out | Zoom in |
Pantalla de carga
Lo que ven los visitantes mientras carga la siguiente página.
| Ajuste | Valor por defecto | Notas |
|---|---|---|
| Logo | Ninguno | Elige una imagen de la biblioteca de medios. Sustituye al texto de carga a menos que muestres ambos |
| Max width (con un logo) | 180 px (20–1200) | — |
| Text with logo (con un logo) | Hidden | Hidden, Above o Below del logo; con Above o Below, Gap fija el espacio entre ellos (16 px, 0–200) |
| Loading text | Loading... | Desactivado mientras se muestra un logo sin texto |
| Text size | 5 rem (0.5–20) | — |
| Colors | Background #15120F, Text #F4F1EA | Hex o una variable CSS |
Cuándo se reproduce
| Ajuste | Opciones | Valor por defecto |
|---|---|---|
| Play entry animation | On navigation: solo al llegar desde otra página del sitio. On every load: también en recargas y visitas directas | On navigation |
| Skip on small screens | On/off; activado, Up to fija el ancho (200–4000 px) | Off, 768 px |
Las transiciones también se omiten cuando Respect "Reduce motion" está activado y el sistema del visitante solicita menos movimiento. La pantalla te avisa cuando es el caso, y te advierte si tu propio dispositivo tiene activado el movimiento reducido (no verás transiciones mientras pruebas).
Avanzado
Una sección colapsada con dos ajustes:
| Ajuste | Valor por defecto | Notas |
|---|---|---|
| Exclude URLs | Vacío | Una ruta o URL por línea; las transiciones no se reproducen hacia o desde estas páginas. Añade una query string para acotar una coincidencia: /?preview=1 excluye solo esa pantalla exacta. Escribe ?preview sin valor para que coincida con cualquier valor de ese parámetro |
| Don't transition from | Vacío | Selectores (por ejemplo .no-transition) cuyos clics abren la siguiente página sin transición |
Animaciones de entrada después de una transición
Cuando un visitante llega a través de una transición, las animaciones de entrada y de texto que ya están en pantalla esperan a que la transición termine, y entonces se reproducen, así el visitante las ve animarse en vez de encontrarlas ya colocadas. En una carga directa (URL escrita, recarga, enlace desde otro sitio) nada espera. Los elementos más abajo en la página se reproducen al entrar en pantalla con el scroll, como siempre.
Para desarrolladores: el evento fancyanimations:pagetransitionend se lanza en window una vez
por carga de página, cuando la transición ha terminado (o al instante cuando no hay ninguna que
reproducir).
Problemas comunes
- No se reproduce ninguna transición. El interruptor de arriba de la pantalla está apagado (el valor por defecto en una instalación nueva). Enciéndelo y guarda.
- El texto de carga no se muestra aunque hay un logo configurado. "Text with logo" sigue en Hidden: elige Above o Below.
- Las transiciones no se reproducen para visitantes que pidieron movimiento reducido en su sistema. Es lo esperado cuando Respect "Reduce motion" está activado (está desactivado por defecto).
- Una pantalla concreta de admin o del constructor recibe una transición no deseada. Añade su URL, con una query string distintiva si hace falta, a "Exclude URLs".