Cambio de color de fondo efecto de scroll (JQuery)

by WinsTon porrasFEB 21, 2021

codificando en Jquery

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 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.

La cuestión es que como era supuestamente un código en una pagina de tutoriales de un builder especifico cualquiera pensaría que no funcionaria fuera de este, el echo es que con solo ver el código te das cuenta que son unas simples funciones en jQuery muy bien echas así fue que me dispuse a implementarlas en esta web echa 100% en Gutenberg y código y por supuesto funcionaron a la perfección. 

Les comparto el código listo para implementar

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 que vaya 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 funcion para el atributo DATA-COLOR.

(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)

Espero que lo usen en proximos proyectos.