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
Hola, muy bueno tu aporte. Me surge una duda, este mismo método sirve para agregar un preloading en WordPress? Entiendo que si cambio el selector a body deberia afectar a todas las páginas o post type, verdad? Gracias por tu respuesta. Saludos.
Hola, es un efecto de transición, los elementos ya deberían estar cargados, al menos del DOM ya que como ves esta programado en el evento ready, si te interesa tener una optimización de precarga podrías usarla en las imágenes a través de Lazy Load por ejemplo, revisa: https://decodecms.com/optimizar-la-carga-de-imagenes-con-lazy-load/
Muchas gracias Jhon por tus comentarios y compartir.
Yo nocesito que se anime el logotipo de la empresa y que en automático al terminar la animación caigan los elementos de la página. Creo esta guía me ayudara mucho