• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Themes / Agregar animaciones de aparición sin plugins en WordPress
Anuncio banner webservi

Agregar animaciones de aparición sin plugins en WordPress

Agregar animaciones de aparición sin plugins en WordPress

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

js mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

resultado final fade in

 

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

No olvides cambiar el selector que es un id o clase sobre el que se aplicará el efecto de aparición
Para insertar este código javascript puedes revisar el artículo: Insertar javascript en WordPress de forma correcta

 

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

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Insertar Javascript en WordPressInsertar javascript en WordPress de forma correcta
  • SVG animado en WordPressInsertar un logo SVG animado en WordPress
  • 5 Temas para la Administración de WordPress5 Temas para la Administración de WordPress
  • Archivo de plantilla de acuerdo a url personalizada en WordPressArchivo de plantilla de acuerdo a url personalizada en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 4,67 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Adrián

    5 julio, 2019

    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.

    • Jhon Marreros Guzmán

      8 julio, 2019

      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/

      • Adrián

        12 julio, 2019

        Muchas gracias Jhon por tus comentarios y compartir.

  2. Irma Dávila

    24 septiembre, 2019

    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

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Mostrar widget lateral al inicio en móviles

Insertar javascript en WordPress de forma correcta

Agregar datos a los endpoints de la API de WooCommerce

¿Qué es el Loop de WordPress?

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad