Agregar animaciones de aparición sin plugins en WordPress

[ 19 junio 2019 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

js mejoras

Si tienes un sitio web, es posible que quieras añadir algunos efectos, en este artículo veremos cómo agregar animaciones de aparición sin usar plugins, y será la base para agregar animaciones más complejas.
 

Resultado Final

Al final obtendremos el efecto de aparición al hacer scroll o al cargar, tal como se ve en los widgets del footer en la siguiente imagen:

Generalidades

Los constructores de páginas como Elementor, Page Builder, etc. tienen integrado un sistema de animaciones, sin embargo si no estamos usando estos plugins podemos aún dar ciertas animaciones sutiles a nuestro sitio, a continuación veremos cómo implementar una animación de aparición para determinadas secciones de nuestro sitio web de manera simple usando javascript.

Código Javascript

Para dar este tipo de efectos será necesario agregar código javascript a nuestro sitio web, puedes usar el siguiente código, simplemente cambia la variable de selector que indica a qué sección afectará la animación.

(function( $ ) {

	$(document).ready(function() {
		let selector = $('.widget');

		selector.css('opacity','0');

		fade_in(selector);
	    $(window).scroll(function(){ fade_in(selector) });
	    
	    function fade_in(selector){
			selector.each( function(){
	            let bottom_of_element = $(this).offset().top + $(this).outerHeight();
	            let bottom_of_window = $(window).scrollTop() + $(window).height();
	            
	            if( bottom_of_window > bottom_of_element ){
	                $(this).animate({'opacity':'1'},1500);
	            }
        	});
		}
	});

})( jQuery );

 
En el código anterior:

• El código es dependiente de la librería jquery por lo que deberías tenerla cargada antes, usamos una envoltura para jquery
• Usamos el evento ready en el cual se implementará el código
• La variable selector almacena la clase o id del elementos o elementos sobre los cuales se aplicará la animación
• Inicializamos el selector ocultándolo usando su propiedad opacity
• La función fade_in() es la que tiene la lógica de aparición del elemento, tiene como parámetro el selector
• La función fade_in() se llama directamente en el evento ready, y también se llama en el evento scroll
• Dentro de la función fade_in() utilizamos un bucle ya que es posible que exista más de un elemento definido por el selector
• Obtenemos las posiciones del elemento y de la pantalla y hacemos una comprobación para saber si el elemento se esta mostrando
• Si el elemento del selector se esta mostrando entonces hacemos la animación de aparición con la propiedad opacity
• La duración de la animación es de 1.5 segundos

Conclusión

Como hemos visto, es posible agregar algunos efectos sutiles de «fade in» en algunas secciones de nuestro sitio web de manera simple usando javascript y sin usar plugins adicionales en WordPress.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores

Valora este artículo : (3 votos, promedio: 4,67 de 5)

Cargando…