Cómo añadir animaciones elegantes a tus páginas web de Divi y WordPress con ScrollReveal sin plugins

Divi incluye un sistema de animaciones integrado que permite animar elementos cuando aparecen en pantalla por primera vez. Sin embargo, estas animaciones tienen una limitación importante: solo se reproducen una vez durante la carga inicial, lo que significa que si el usuario hace scroll hacia arriba y abajo en tu página, los elementos permanecen estáticos después de su primera aparición.

En este tutorial, te enseñaré cómo superar esta limitación implementando ScrollReveal, una librería de animaciones que nos permitirá crear efectos que se repiten cada vez que los elementos entran en el viewport. Esto significa que tus animaciones se activarán una y otra vez mientras el usuario navega por tu sitio, creando una experiencia más dinámica e interactiva.

Implementación Paso a Paso

Paso 1: Agregar el Código (2 Métodos)

Método 1: Para Todo el Sitio Web

Si quieres que las animaciones estén disponibles en todas las páginas de tu sitio:

1. Ve a tu panel de WordPress
2. Navega a Divi → Opciones del tema → Integración
3. En la sección «Añadir código al head de tu blog», pega el siguiente código:

<script src="https://unpkg.com/scrollreveal"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  // Configuración global scrollReveal
  const sr = ScrollReveal({
      reset: true,
      duration: 800,
      viewFactor: 0.2,
      easing: 'ease'
  });
  // ===== BÁSICAS MEJORADAS =====
  // Fade Up con diferentes intensidades
  sr.reveal('.ov-reveal-up', {
      origin: 'bottom',
      distance: '30px'
  });
  sr.reveal('.ov-reveal-up-soft', {
      origin: 'bottom',
      distance: '15px'
  });
  sr.reveal('.ov-reveal-up-strong', {
      origin: 'bottom',
      distance: '50px'
  });
  // ===== FADE DIRECCIONALES =====
  sr.reveal('.ov-reveal-down', {
      origin: 'top',
      distance: '30px'
  });
  sr.reveal('.ov-reveal-left', {
      origin: 'right',
      distance: '30px'
  });
  sr.reveal('.ov-reveal-right', {
      origin: 'left',
      distance: '30px'
  });
  // ===== ZOOM VARIATIONS =====
  // Zoom In suave
  sr.reveal('.ov-reveal-zoom-in', {
      scale: 0.95,
      distance: '0px'
  });
  // Zoom Out suave
  sr.reveal('.ov-reveal-zoom-out', {
      scale: 1.05,
      distance: '0px'
  });
  // Zoom con fade desde diferentes direcciones
  sr.reveal('.ov-reveal-zoom-up', {
      scale: 0.95,
      origin: 'bottom',
      distance: '30px'
  });
  sr.reveal('.ov-reveal-zoom-down', {
      scale: 0.95,
      origin: 'top',
      distance: '30px'
  });
  // ===== ROTACIONES SUTILES =====
  // Rotación suave desde diferentes ángulos
  sr.reveal('.ov-reveal-rotate', {
      rotate: { z: 3 },
      distance: '0px'
  });
  sr.reveal('.ov-reveal-rotate-left', {
      rotate: { z: -3 },
      origin: 'right',
      distance: '30px'
  });
  sr.reveal('.ov-reveal-rotate-right', {
      rotate: { z: 3 },
      origin: 'left',
      distance: '30px'
  });
  // ===== EFECTOS ESPECIALES =====
  // Efecto de desvanecimiento
  sr.reveal('.ov-reveal-fade', {
      distance: '0px',
      opacity: 0
  });
  // Efecto de surgir
  sr.reveal('.ov-reveal-emerge', {
      scale: 0.95,
      opacity: 0,
      distance: '15px',
      origin: 'bottom'
  });
  // Efecto de flotar
  sr.reveal('.ov-reveal-float', {
      distance: '15px',
      origin: 'bottom',
      easing: 'cubic-bezier(0.5, 0, 0, 1)',
      duration: 1000
  });
  // ===== COMBINACIONES ELEGANTES =====
  // Zoom con rotación sutil
  sr.reveal('.ov-reveal-zoom-rotate', {
      scale: 0.95,
      rotate: { z: 2 },
      distance: '0px'
  });
  // Entrada dramática pero elegante
  sr.reveal('.ov-reveal-dramatic', {
      distance: '50px',
      origin: 'bottom',
      scale: 0.95,
      duration: 1000,
      easing: 'cubic-bezier(0.5, 0, 0, 1)'
  });
  // ===== GRUPOS Y SECUENCIAS =====
  // Cascada básica
  sr.reveal('.ov-reveal-cascade', {
      interval: 100,
      distance: '20px',
      origin: 'bottom'
  });
  // Cascada con zoom
  sr.reveal('.ov-reveal-cascade-zoom', {
      interval: 100,
      scale: 0.95,
      distance: '20px',
      origin: 'bottom'
  });
  // ===== EFECTOS ESPECIALES AVANZADOS =====
  // Efecto de despliegue
  sr.reveal('.ov-reveal-unfold', {
      duration: 1000,
      scale: 0.95,
      distance: '30px',
      origin: 'bottom',
      easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
  });
  // Efecto de deslizamiento suave
  sr.reveal('.ov-reveal-slide', {
      duration: 900,
      distance: '40px',
      origin: 'left',
      easing: 'ease-in-out'
  });
  // Efecto de aparición natural
  sr.reveal('.ov-reveal-natural', {
      duration: 1000,
      scale: 0.98,
      distance: '20px',
      origin: 'bottom',
      easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
  });

  // Inicializar animaciones
  initAnimations();

  window.addEventListener('load', function() {
      initAnimations();
      sr.sync();
  });
});
</script>

Método 2: Solo Para Una Página Específica

Si prefieres implementar las animaciones únicamente en una página en particular:

1. Edita la página donde quieres las animaciones
2. Agrega un módulo «Código» de Divi
3. Coloca el módulo preferiblemente al final de tu página
4. Pega el código en el módulo
5. Guarda los cambios

Este segundo método es ideal cuando:

• Solo necesitas las animaciones en una página específica
• Estás creando una landing page
• No quieres cargar el script en todo tu sitio
• Quieres probar las animaciones antes de implementarlas globalmente

Paso 2: Usar las Animaciones

Para animar cualquier elemento en Divi:

1. Selecciona el módulo que deseas animar
2. Ve a la pestaña «Avanzado»
3. En el campo «Clases CSS», agrega una de las siguientes clases:

Animaciones Básicas

ov-reveal-up – Aparece desde abajo

ov-reveal-down – Aparece desde arriba

ov-reveal-left – Aparece desde la derecha

ov-reveal-right – Aparece desde la izquierda

Efectos de Zoom

ov-reveal-zoom-in – Zoom suave hacia adentro

ov-reveal-zoom-out – Zoom suave hacia afuera

ov-reveal-zoom-up – Zoom con movimiento hacia arriba

Efectos Especiales

ov-reveal-fade – Simple desvanecimiento

ov-reveal-emerge – Efecto de surgimiento

ov-reveal-float – Efecto flotante

ov-reveal-dramatic – Entrada dramática

ov-reveal-natural – Aparición natural y suave

Para Grupos de Elementos

ov-reveal-cascade – Animación en secuencia

ov-reveal-cascade-zoom – Secuencia con zoom

Crea tu propias animaciones

sr.reveal('.tu-clase', {
    distance: '50px',      // Distancia que recorre el elemento
    origin: 'bottom',      // Desde dónde aparece (bottom, top, left, right)
    duration: 1000,        // Duración de la animación en milisegundos
    delay: 0,              // Retraso antes de empezar
    reset: true,           // true = la animación se repite, false = solo una vez
    scale: 1,              // Escala inicial (0.9 = 90% del tamaño)
    opacity: 0,            // Opacidad inicial
    interval: 0,           // Retraso entre elementos consecutivos
    rotate: { x: 0, y: 0, z: 0 }, // Rotación en grados
    easing: 'ease',        // Tipo de aceleración
});

Mejores Prácticas

1. No sobrecargues: Usa las animaciones con moderación
2. Mantén la consistencia: Utiliza el mismo tipo de animación para elementos similares
3. Piensa en móviles: Las animaciones funcionan en todos los dispositivos
4. Velocidad de carga: Las animaciones solo se activan cuando son necesarias

Ejemplos de Uso

Títulos principales: ov-reveal-up

Imágenes destacadas: ov-reveal-zoom-in

Listas de características: ov-reveal-cascade

Botones call-to-action: ov-reveal-emerge

Testimonios: ov-reveal-fade
 

Conclusión

Con ScrollReveal, puedes dar vida a tu sitio web Divi de una manera profesional y elegante. Estas animaciones mejorarán la experiencia del usuario sin comprometer el rendimiento de tu sitio.

¿Tienes preguntas? ¡Déjalas en los comentarios!