/* 1. Estilo inicial de la sección (fondo blanco) */ #seccion-cambia-color { background-color: #FFFFFF; /* Fondo blanco inicial */ transition: background-color 0.8s ease-in-out; /* Transición suave */ } /* 2. Estilo final (cuando se añade la clase con JavaScript) */ #seccion-cambia-color.color-activo { background-color: #C7C7BE; /* Fondo de color final */ } document.addEventListener('DOMContentLoaded', function() { // Busca la sección por su ID const seccion = document.getElementById('seccion-cambia-color'); // Opciones para el observador const opciones = { root: null, // Observa en relación al viewport rootMargin: '0px', threshold: 0.2 // Se activa cuando el 40% de la sección es visible }; // Crea el observador const observador = new IntersectionObserver(function(entries, observador) { entries.forEach(entry => { // Si la sección está entrando en la vista if (entry.isIntersecting) { seccion.classList.add('color-activo'); } // Si la sección está saliendo de la vista (opcional) else { seccion.classList.remove('color-activo'); } }); }, opciones); // Empieza a observar la sección if (seccion) { observador.observe(seccion); } });