Hace unos días un cliente me pidió un efecto de scroll para su web y no quería la típica animación de css al hacer scroll. Queria algo diferente y al tener una web ya de por si bastante grande y pesada era impensable insertar archivos lottie (JSON animation).
Pues como la web estaba echa en WordPress y se había escogido una paleta de colores muy chula se me ocurrió y que tal si implemento un efecto de cambio de color del background del body al hacer scroll con jQuery.
Y así me dispuse a implementar este código no sin antes buscar info por todos los lados posibles haber si ya habían echo antes este tipo de efectos para Wordpress.
Implementando el codigo Jquery en Wordpress
Después de buscar por GitHub, foros y miles de lugares para no tener que empezar el código de cero me tope con varios horrores de código hasta que me tope con una pagina la cual se encarga de hacer tutorial para DIVI ese page builder de WordPress tan famoso el cual nunca eh usado pero si eh oído bastante bien de el.
Esta técnica funciona al utilizar algoritmos de aprendizaje automático para analizar datos de usuarios y de motores de búsqueda. Estos algoritmos son capaces de aprender y adaptarse a medida que se les proporciona más información.
Primero el CSS en mi caso modifique un poco la velocidad de la transición y por supuesto el background del body.
body {
background: #0652DD;
transition: all 500ms;
will-change: background;
}
Ahora les comparto este primer fragmento de JQUERY con el cual agregamos el atributo data-color y los colores que vayan cambiando al hacer scroll cada sección de la pagina mediante un ID.
jQuery(function($){
$( "#seccion1" ).attr( "data-color", "#0652DD" );
$( "#seccion2" ).attr( "data-color", "#EE5A24" );
$( "#seccion3" ).attr( "data-color", "#A3CB38" );
$( "#seccion4" ).attr( "data-color", "#12CBC4" );
$( "#seccion5" ).attr( "data-color", "#EA2027" );
});
Y ahora este segundo fragmento de código jQuery que es donde declaramos la función para el efecto scroll
(function($){
$(window).on("scroll touchmove", function() {
if ($(document).scrollTop() >= $("#seccion1").position().top) {
$('body').css('background', $("#seccion1").attr("data-color"));
};
if ($(document).scrollTop() > $("#seccion2").position().top) {
$('body').css('background', $("#seccion2").attr("data-color"))
};
if ($(document).scrollTop() > $("#seccion3").position().top) {
$('body').css('background', $("#seccion3").attr("data-color"))
};
if ($(document).scrollTop() > $("#seccion4").position().top) {
$('body').css('background', $("#seccion4").attr("data-color"))
};
if ($(document).scrollTop() >= $("#seccion5").position().top) {
$('body').css('background', $("#seccion5").attr("data-color"))
};
});
})(jQuery)
- Diseño Grafico y UI con figma
Leer Ahora! - Busqueda de Palabras Claves
Leer Ahora! - Que hay nuevo en el SEO este 2023
Leer Ahora! - Trasform popiedad de CSS
Leer Ahora!