Hacer una transición o cambio de color de una sección al desplazarnos o al hacer scroll con divi y wordpress.
Hola bienvenido a un tutorial más de OV DIVI, en este tutorial aprenderás a cambiar el color de los elementos de una sección al llegar a dicha sección, es decir, al irnos desplazando sobre la página y lleguemos a dicha sección ésta hará una transición del color de sus elementos, en específico del color de fondo y el color de las tipografías, aunque bien se podría cambiar el color de cualquier elemento de la sección. Incluso podríamos cambiar el color de fondo del menú, pie de página o cualquier otro elemento de nuestro sitio.
La verdad que este efecto es muy interesante y le agrega dinamismo a nuestro sitio web creado con divi y wordpress.
Este efecto no es nada difícil de implementar, yo ya he creado los códigos correspondientes para que solo copies y pegues y así puedas implementar fácilmente el efecto en cualquier sitio web hecho con divi.
Solo vamos a necesitar este pequeño fragmento de código jquery:
(function($){
$(window).scroll(function(){
if ($(window).scrollTop() >= $("#seccionCambioColor").position().top) {
$( "#seccionCambioColor" ).addClass( "color-elementos-seccion" );
} else {
$( "#seccionCambioColor" ).removeClass( "color-elementos-seccion" );
}
});
})(jQuery);
Y este otro fragmento de código CSS:
#seccionCambioColor.color-elementos-seccion {
background-color: #000000 !important; /* Fondo de la seccion */
transition: background-color 0.3s ease !important;
}
.color-elementos-seccion h2, .color-elementos-seccion h3, .color-elementos-seccion h4 {
color: #ffffff; /* Color de los titulos */
}
.color-elementos-seccion p {
color: #f5f5f5; /* Color de los parrafos */
}
Con estos sencillos fragmentos lograremos ese hermoso efecto.
Hola Oscar, ¡Muchas gracias por el tutorial!
¿Habría alguna forma de que al volver el scroll hacia arriba, no sea tan brusco el cambio?
Es decir, cuando hace el cambio a fondo negro es suave y además puedo controlarlo gracias al transition: background-color 0.3s ease, pero cuando quiero regresar arriba y se vuelve a poner el fondo blanco, es muy repentino.
¿Hay algún código que pueda poner?
¡Gracias de nuevo!
Hola Axel, a ver intenta agregando este código CSS:
#seccionCambioColor { transition: background-color 0.3s ease !important; }