Cambia de color de fondo efecto scroll para tu web (JQuery)

by WinsTon porras

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)