Hace unos días un seguidor del canal de youtube me compartió este sitio para preguntarme si era posible realizar un efecto de cambio de color de fondo al ir haciendo scroll sobre la página tal y como se muestra en el sitio. Me pareció muy interesante que mi respuesta fue «Lo trataré de hacer, si lo logro haré un tutorial». ¿Y qué crees? Sí, adivinaste ¡Lo logré!
En este video tutorial te comparto como lograr ese efecto, es decir, te enseño como cambiar el color de fondo de cada sección en divi al ir haciendo scroll.
Para lograr dicho efecto vamos a necesitar de un poco de código jQuery y unas cuantas líneas de CSS, no te asustes que no es nada del otro mundo. Además yo te la pongo tan fácil que en esta entrada te dejaré los fragmentos de código que vamos a utilizar en el ejercicio para que solo copies y pegues.
Primero te comparto el código CSS que simplemente es para asignarle un color de fondo al body de nuestro sitio con una transición (ya te darás cuenta en el video tutorial donde debes pegar este código):
body {
background: #0652DD;
transition: all 500ms;
will-change: background;
}
Ahora te comparto este primer fragmento de código jQuery que es para asignarle el atributo «data-color» a cada sección de la página 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 por último te comparto este segundo fragmento de código jQuery que es donde declaramos la función para que el atributo «data-color» se vaya activando al ir haciendo 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)
Oscar,
Muy buen tutorial, bro. Yo también ya estoy pensando en dónde poder usarlo a la brevedad. Este es de ese tipo de tutoriales que se agradecen de verdad.
Gracias Jorge. Me alegro que te ha gustado, ya me enseñarás la página dónde lo apliques. Seguiré con este tipo de tutoriales porque son los que mas gustan. Un abrazo Jorge.
Hola Oscar,
Antes de nada, muchas gracias por el tutorial. Muy bueno.
He seguido todos los pasos y comentarte que me funciona pero no me carga el contenido de las secciones, tengo que refrescar el navegador varias veces para que se visualice. He probado con Firefox y Chrome y en varios equipos y siempre el mismo resultado. El cambio de color de las secciones funciona, pero el contenido no siempre.
El contenido es básico: texto sencillo e imágenes.
¿Se te ocurre qué puede estar sucediendo?
Muchas gracias de antemano,
Un saludo
Hola Raúl, que extraño comportamiento, el contenido no se muestra solo cuando aplicas este efecto? Puedo ver tu sitio?
Hola Óscar,
El sitio es: test.alonsodiez.com
Te puedo enviar usuario y contraseña si me dejas un email.
Muchas gracias,
Un saludo
Amigo al inspeccionarlo me sale un error de bootstrap, no sé si tengas algún complemento que esté causando el problema. Según es esto: http://tether.io/
Intenta desactivar los plugins que tienes, si el efecto funciona, entonces no tiene nada que ver con el efecto de cambiar el color al realizar scroll.
Hola! Me funciona perfecto!
Lo único que las demás transiciones que tenia en mi web dejan de funcionar. A qué se debe??
Hola Carlos, la verdad desconozco el problema. No me ha pasado 🙁
pudiste solucionarlo?
Hola Oscar, buenas tarde. he realizado los pasos varias veces pero no me sale el cambio de color, no se que paso realice malo, porque he seguido al pie de la letra y nada. no me funciona.
por favor me puedes ayudar… la pagina es «nosotros» y esta en wp todavia porque aun no la publico, tu tienes el usurio y la contraseña. es la pagina de la fundacion que estoy realizando.
gracias. te agradezco
Oscar buenos dias. ya encontre el error era que el script le faltaba la t.. gracias por todo
Excelente Alexander, como te mencioné en youtube, poco a poco vas mejorando, sigue así 🙂
Hola amigo muchas gracias por el artículo, solo hay un pequeño problema, el efecto me está matando otros Scroll Effects que tenía, alguna posible solución?
gracia de nuevo
No sabría decirte Juan, no conocía que este efecto no se llevaba con los Scroll Effects 🙁 Quizá debas decidirte por un efecto o por otro. Tengo que indagar más sobre el tema.
Un abrazo.