Crear animaciones con JavaScript en WordPress

Las animaciones en una pagina web son una parte extra al contenido, un efecto que puede aportar algo de originalidad a una página en concreto, haciéndola más llamativa para el usuario.

En este caso voy a poner un par de ejemplos para que probéis en vuestra página. Las instrucciones estan más bien enfocadas a usarlas en el tema Generatepress o Astra, pero se puede insertar en cualquier sitio WordPress.

1er Efecto: el objeto se aparece suavemente al cargar la página

En el caso de WP, asegúrate de que tu elemento tenga una clase específica, por ejemplo, desde un bloque de imagen – Avanzado – Clases CSS: mi-elemento-animado

<img class="mi-elemento-animado alignnone wp-image-21779 size-medium" src="https://fransoler.net/wp-content/uploads/2023/12/night-9061_java-1-300x250.gif" alt="" width="300" height="250" />

Estructura en html

Agrega estilos CSS desde el personalizador para inicialmente ocultar el elemento y luego aplicar una transición suave en la propiedad de opacidad:

/* Transición suave de 1 segundo para cambiar la opacidad */
.mi-elemento-animado {
    opacity: 0; /* Inicialmente establece la opacidad en 0 para ocultar el elemento */
    transition: opacity 1s ease-in-out; 
}

/* Cuando se aplica la clase "mostrar", la opacidad se establece en 1, revelando el elemento */
.mi-elemento-animado.mostrar {
    opacity: 1; 
}

Puedes usar JavaScript para añadir la clase «mostrar» al elemento después de que la página se haya cargado. Agrega el siguiente código en el pie de página através de un hook (gancho) o usando el plugin Insert Headers And Footers si tu tema no dispone de esta funcionalidad.

Nota: si usas un hook debes colocarlo en wp-footer y si usas el plugin insertalo en la zona Scripts in Footer

Ejemplo en plugin (sólo para el script)

Código JavaScript envuelto en HTML:

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var elemento = document.querySelector('.mi-elemento-animado');
        elemento.classList.add('mostrar');
    });
</script>

Esto garantiza que la clase «mostrar» se añada al elemento después de que el DOM se haya cargado. Guarda tus cambios y verifica que la animación funcione correctamente al cargar la página. Puedes ajustar la duración de la transición y otros estilos según tus necesidades.

2º Efecto: Animación al hacer scroll

En este caso, los pasos a seguir serán idénticos que en el efecto anterior, sólo debemos de cambiar el código.

Dentro del bloque de imagen en Avanzado – Clases CSS: animacion-scroll

Agrega estilos CSS para la animación. En este ejemplo, usaremos la clase fade-in :

/* Agrega este estilo a tu archivo de estilo CSS o en el Personalizador de WordPress */
.animacion-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}

.animacion-scroll.fade-in {
  opacity: 1;
  transform: translateY(0);
}

Agrega el siguiente Script en el hook o utiliza el plugin Insert Headers And Footers:

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Encuentra el elemento que deseas animar
  var animatedElement = document.querySelector('.animacion-scroll');

  function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();
    return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }

  function fadeInOnScroll() {
    if (isElementInViewport(animatedElement)) {
      animatedElement.classList.add('fade-in');
      // Desregistra el evento después de que la animación ha ocurrido una vez
      window.removeEventListener('scroll', fadeInOnScroll);
    }
  }

  // Registra el evento de desplazamiento
  window.addEventListener('scroll', fadeInOnScroll);

  // Activa la función al cargar la página
  fadeInOnScroll();
});
</script>

Este script agrega la clase fade-in al elemento cuando está en el viewport, lo que activará la animación CSS.

Ejemplo completo en Generatepress Pro

Con este par de animaciones puedes conseguir un efecto sutil en tu web sin necesidad de instalar maquetadores visuales como elementor o divi.
Recuerda cada cada animación requiere de su propio código, es decir, si pones la clase CSS de cualquiera de los ejemplos anteriores mi-elemento-animado o animacion-scroll en una imagen o texto, deberías hacer un código nuevo tanto en CSS como en JavaScript para poder aplicarlo a otro elemento de la página.

Rate this post
Suscribir
Notificar para
guest

0 Comments
Inline Feedbacks
View all comments