Cerrar video

Cambiar el color de fondo de cada sección en divi al ir haciendo scroll

por | Abr 30, 2019 | Tutorial gratuito | 14 Comentarios

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)

Tutoriales Relacionados

14 Comentarios

  1. Jorge Salazar

    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.

    Responder
    • Oscar Viedma

      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.

      Responder
  2. Raúl

    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

    Responder
    • Oscar Viedma

      Hola Raúl, que extraño comportamiento, el contenido no se muestra solo cuando aplicas este efecto? Puedo ver tu sitio?

      Responder
      • Raúl

        Hola Óscar,

        El sitio es: test.alonsodiez.com

        Te puedo enviar usuario y contraseña si me dejas un email.

        Muchas gracias,
        Un saludo

        Responder
        • Oscar Viedma

          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.

          Responder
  3. Carlos

    Hola! Me funciona perfecto!
    Lo único que las demás transiciones que tenia en mi web dejan de funcionar. A qué se debe??

    Responder
    • Oscar Viedma

      Hola Carlos, la verdad desconozco el problema. No me ha pasado 🙁

      Responder
    • Juan S

      pudiste solucionarlo?

      Responder
  4. ALEXANDER RHENALS

    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

    Responder
    • ALEXANDER RHENALS

      Oscar buenos dias. ya encontre el error era que el script le faltaba la t.. gracias por todo

      Responder
      • Oscar Viedma

        Excelente Alexander, como te mencioné en youtube, poco a poco vas mejorando, sigue así 🙂

        Responder
  5. Juan S

    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

    Responder
    • Oscar Viedma

      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.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$8 USD / mes

Pin It on Pinterest