Anima elementos al desplazar, en hover o al hacer clic.

Aprende DXPR BuilderCrear páginasDa estilo a tus elementosGuías de diseño

Puedes hacer que una sección, una fila o cualquier elemento de contenido se mueva. Funde un encabezado hacia arriba cuando entra en vista, deja que un botón lo siga un momento después, o pulsa un icono en hover. Cada uno tiene un panel Animation en sus ajustes. El ejemplo funde un encabezado, y luego un botón de inscripción tras una corta espera.

El vídeo funde un botón y un encabezado cuando la sección entra en vista.

Funde un encabezado y un botón

  1. Haz clic en Add Elements en el área de contenido vacía y escoge Section en la pestaña Layout.
  2. Pasa sobre la sección y abre More > Settings.
  3. En HTML classes, escoge Align text center y haz clic en Save.
  4. Haz clic en + en la sección y escoge Button en la pestaña Content. Se abren sus ajustes.
  5. Escribe Register now en Title y /register en Link.
  6. Abre el panel Animation y fija Animation start en On appear.
  7. Fija Animation in en fadeInUp.
  8. En Hidden, marca Before in-animation.
  9. Fija In-delay en 600 y haz clic en Save.
  10. Haz clic en + en la sección de nuevo y escoge Text en la pestaña Content. Cae sobre el botón.
  11. Escribe un encabezado, como Open day 2026, y fíjalo en Heading 2 en la barra del editor.
  12. Abre el panel Animation. Elige On appear, fadeInUp y Before in-animation, como para el botón.
  13. Fija Duration en 800 y haz clic en Save.
  14. Haz clic en Save en la barra.
  15. Abre el menú de vista (el icono de ojo en la barra) y elige Preview.

Más efectos para probar

  • Scroll reveal: On appear, fadeInUp, Before in-animation y una Duration de 800.
  • Staggered cards: el mismo efecto en tres tarjetas, con un In-delay de 0, 200 y 400.
  • Attention pulse: On appear, pulse, Infinite activado y una Duration de 1500.
  • Hover pulse: On hover, pulse y un Parent number de 0, para que solo el propio elemento reaccione.
  • Tab reveal: On trigger y fadeIn en los elementos dentro de una pestaña. Se reproducen cada vez que se abre la pestaña.

Lo que ves

Cuando guardas el texto, el editor reproduce ambos efectos: el encabezado se funde hacia arriba en 800 milisegundos y el botón lo sigue 600 milisegundos después. Las visitas ven lo mismo cuando la sección entra en vista, una vez por carga de página. Ambos quedan invisibles hasta que empieza su efecto, porque Before in-animation está marcado.

Ajustes

Ajuste Qué hace Predeterminado
Animation start Cuándo se reproduce el efecto: On appear (entra en vista), On hover, On click u On trigger (cuando se abre el slide de carrusel, pestaña o toggle que contiene el elemento) No animation
Animation in El efecto de entrada: fundidos, deslizamientos, zooms, giros y efectos de atención como bounce, pulse y shake No animation
Animation out El efecto de salida, de la misma lista. Se muestra solo para On hover y On trigger. No animation
Hidden Before in-animation mantiene el elemento invisible hasta que se reproduce su efecto. After in-animation lo oculta cuando termina el efecto. Ninguno
Infinite Repite el efecto sin fin Desactivado
Appear boundary Para On appear: a qué distancia bajo la pantalla empieza el efecto, en porcentaje de la altura de pantalla. 0 lo inicia cuando el elemento entra en vista; 100 lo inicia una altura de pantalla antes. 100
Duration Duración del efecto, de 0 a 3000 milisegundos 1000
In-delay Espera antes de que se reproduzca la entrada, hasta 10000 milisegundos 0
Out-delay Espera antes de que se reproduzca la salida, hasta 10000 milisegundos 0
Parent number Para On hover y On click: a qué elemento apunta la visita o hace clic. 0 es el propio elemento, 1 su padre, 2 el padre del padre. 1

Las columnas no tienen panel Animation. Tampoco las pestañas, toggles y slides sueltos dentro de elementos de diseño. Anima el elemento dentro de ellos.

Si no ves la animación

  • The element never appears. Before in-animation lo oculta hasta que se reproduce su efecto, pero Animation in es No animation. Escoge un efecto en Animation in.
  • El efecto se reprodujo una vez y se detuvo. On appear se reproduce una vez por carga de página. Recarga la página para verlo de nuevo, o activa Infinite para un efecto que se repite.
  • El efecto empieza antes de que la visita llegue al elemento. Appear boundary está alto: en 100, el efecto empieza una altura de pantalla antes de que el elemento entre en vista. Fíjalo en 0 en el panel Animation.
  • Pasar el cursor cerca del elemento inicia el efecto. Parent number es 1, así que el padre escucha el puntero. Fija Parent number en 0.

¿Qué sigue?

  • Efectos hover: cambia colores, sombras u opacidad mientras el puntero descansa en un elemento.
  • Fondos: dale a la sección animada un color, una foto o un degradado.
  • Diseño de carrusel: reproduce efectos On trigger cada vez que se abre un slide.