Animaciones scroll en Wordpress sin plugins

Cómo crear animaciones de scroll en WordPress

Facebook
LinkedIn
WhatsApp
Twitter

En este tutorial vamos a explicaros cómo crear animaciones de scroll para WordPress sin necesidad de ningún plugin. En el tutorial vamos explicar como realizarlo con Gutenberg pero perfectamente se puede aplicar a Elementor o cualquier otro maquetador de temas.

Para una buena compresión de los pasos del tutorial ves revisando el video que encontrarás al final del artículo.

Llamar a Qjuery

Lo primero que vamos a realizar es llamar a la librería de Jquery. Si las animaciones la vamos a aplicar en una única pagina podemos insertar el script en dicha página y así ahorrarnos la carga de la librería en todas las páginas.

Por el contrario si vamos a aplicar animaciones en varias páginas podemos insertar la llamada a Jquery en la cabecera utilizando WP codelite

En el apartado cabecera y píe insertaremos el siguiente script en la cabecera y guardaremos los cambios.

				
					<script data-cfasync="false"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
				
			

Seleccionar el efecto de animación

Para ello nos iremos a la web de Animista  y buscaremos la animación que queremos aplicar. Copiaremos el código que hace referencia a la clase de la animación y los keyframes y los pegaremos en apariencia/personalizar/css adicional de nuestro administrador de WordPress.

Definir la animación de scroll en WordPress

Dentro de la página donde vayamos a aplicar las animaciónes y al principio de ella insertaremos el siguiente script con un widget de html.

				
					<script data-cfasync="false" type="javascript/blocked" data-wpmeteor-type="text/javascript" >
$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
var containerOffset = $('.animascroll').offset().top -450;
  if (scrollTop > containerOffset) {
    $('.animascroll').addClass('slide-in-bottom');
    $('.animascroll').removeClass('ocultar');
  } else {
    $('.animascroll').addClass('ocultar');
    $('.animascroll').removeClass('slide-in-bottom');
  }
});
</script>
				
			

Lo siguiente que vamos a definir es en que punto del scroll se debe aplicar la animación. Para ello deberemos ir al contenedor o al widget que queramos animar y definirle la clase que le dice al scroll que cuando llegue a ese punto se aplique la animación.

En nuestro caso, la clase a aplicar es animascroll.

Seguimos y dentro del script deberemos modificar la clase de la animación. Para ello nos vamos donde hemos pegado el código CSS, copiar la clase y modificarla dentro del script. Las líneas a modificar son las de la imagen.

animaciones de scroll para wordpress

Ocultar los elementos animados

Para evitar que los elementos animados se muestren y que la animación se aplique cuando el scroll llegue al punto donde se debe aplicar la animación vamos a ocultarlo.

Para ello dentro de tu WordPress nos volvemos a apariencia/personalizar/css adicional y vamos a definir la clase ocultar con un atributo de visibility:hidden.

				
					.ocultar{
visibility:hidden;
}
				
			

Y aplicaremos el atributo CSS visibility:visible dentro de la clase que hace referencia a nuestra animación. Y ya tendríamos aplicada nuestra animación de scroll para WordPress.

Aplicar más de una animación

Si quisieras aplicar más animaciones dentro de la misma página deberás duplicar las siguientes líneas dentro de la función de javascript y crear una nueva clase para en nuevo punto de animación.

También deberás definir una nueva variable y añadirla al comparador IF.

Ya por ultimo te tocara modificar las clases de las animaciones y aplicar la nueva siempre que el efecto sea diferente

				
					var nuevavariable = $('.nuevaclaseparapuntodeanimacion').offset().top -450;
  if (scrollTop > nuevavariable) {
    $('.animascroll').addClass('nuevaclasedeanimacion');
    $('.animascroll').removeClass('ocultar');
  } else {
    $('.animascroll').addClass('ocultar');
    $('.animascroll').removeClass('nuevaclasedeanimacion');
  }
				
			

Puedes ver otros ejemplos de animaciones clicando aquí.

¿Tienes interés en que creemos un tutorial sobre algún tema específico de Elementor? Dejalo en comentarios, prometemos responderte.

Compártenos en tu red social favorita
Facebook
LinkedIn
WhatsApp
Twitter

Deja un comentario

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

He leido y acepto nuestra política de privacidad. *

Responsable:Carlos Jiménez Mendez
Finalidad:Atender solicitudes de información, ejecución de la contratación de servicios y remisión de comunicaciones comerciales.
Legitimación:Consentimiento del interesado y contratación de productos y/o servicios del Responsable
Destinatarios:No se ceden datos a terceros, salvo obligación legal.
Personas físicas o jurídicas directamente relacionadas con el Responsable
Encargados de Tratamiento adheridos al Privacy Shield
Derechos:Acceder, rectificar y suprimir los datos, portabilidad de los datos, limitación u oposición a su tratamiento, derecho a no ser objeto de decisiones automatizadas, así como a obtener información clara y transparente sobre el tratamiento de sus datos.
Información adicional:Se puede consultar la política de privacidad de forma más detallada aquí.
Scroll al inicio