Cerrar video

Agregar efectos de animación de desplazamiento en divi con animate on scroll

por | Ene 18, 2019 | Tutorial gratuito | 7 Comentarios

Como ya has de saber, divi incluye una opción para aplicar efectos de animación a prácticamente cualquier elemento de la página, como secciones, filas y cualquier módulo. Pero hay elementos específicos que no se pueden animar individualmente, tal es el caso de las imágenes del módulo galería y portafolio.

Otro punto en contra de las animaciones que trae divi por defecto, es que el elemento animado solamente se va a animar una vez, por ejemplo, cuando cargamos la página y empezamos a desplazarnos hacia abajo los elementos se van animando, pero si nos volvemos a desplazar hacia arriba los elementos ya no se animarán, al menos que volvamos a recargar la pagina.

En este tutorial te voy a mostrar cómo aplicar un lindo efecto de animación que anime los elementos al hacer scroll hacia abajo y al hacer scroll hacia arriba, sin la necesidad de recargar la pagina, los elementos se van a animar de acuerdo al scrolling que hagas.

En esta ocasión vamos a aplicar este efecto al módulo galería, especialmente a las imágenes, ya que me parece un buen ejemplo para este ejercicio. También se puede aplicar a cualquier sección, fila o módulo de divi sin problema.

Antes de que le des play al tutorial es importante que sepas que vamos a utilizar una librería llamada Animate on Scroll (AOS) y unos pequeños fragmentos de código que solo vamos a copiar y pegar, nada del otro mundo.

 

Fragmentos de código:

Este primer código es para insertar los estilos de la librería, este fragmento lo debemos pegar en el head de nuestro sitio:

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Este otro es para insertar el archivo JavaScript de la librería, este fragmento se pega antes del cierre del body de nuestro sitio:

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

Este otro fragmento es para agregarle los atributos a las imágenes de la galería, también se agrega en el head:

<script>
jQuery(function($){
$( "#galeria .et_pb_gallery_item" ).attr( "data-aos", "zoom-in" );
$( "#galeria .et_pb_gallery_item" ).attr( "data-aos-duration", "750" );
});
</script>

Y este último fragmento de código es para inicializar Animate On Scroll:

<script>
	(function($){
	$(document).ready(function() {
	  AOS.init();
	});
	})(jQuery)
</script>

Enlaces:

Librería Animate On Scroll.

Tutoriales Relacionados

7 Comentarios

  1. María

    Esta genial el articulo. Saludos.

    Responder
  2. Luis Argenis Cruz Sanchez

    Hola, como puedo agregar un enlace en cada imagen? quiero hacerlo con libros para descarga, mi página es magisterjuris.com

    Responder
  3. Luis Argenis Cruz Sanchez

    Ya lo pude hacer muy sencillo poniendo los enlaces desde medios, pero ahora me sale una leyenda que dice «the image could not be loaded» cada que doy click en una imagen, es posible hacer que no aparezca esa leyenda?

    Responder
      • Argenis

        Si, lo hice desde medios de wordpress ahí mismo incluí el link a cada imagen, gracias

        Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest