Estoy tratando de hacer la transición entre los colores de fondo en una sola sección para que cuando una sección específica (.bg_container) llegue a la parte superior de la ventana gráfica, el color de fondo comience a suavizar la transición mientras se desplaza. He visto muchos ejemplos de transiciones/desvanecimientos de fondo muy agradables, pero todos asumen que cada sección tiene su propio color.

El problema aquí es que tengo más colores que secciones, por lo que no puedo vincular el color de fondo a las secciones.

 <script> var bg_colours = [ "#f0f0ff", "#ff00ff", "#0ff00f", "#ffffff", "#000000", ]; </script> <div class="main"> <div class="header"> <span>lorum ipsom</span> </div> <div class="module_one"> <p>lorum ipsom</p> </div> <div class="module_two bg_container"> <div class="bg_section height_100_percent"> <div class="left_content"> <p>lorum ipsom</p> </div> <div class="right_content"> <p>lorum ipsom</p> </div> </div> <div class="bg_section height_100_percent"> <div class="left_content"> <p>lorum ipsom</p> </div> <div class="right_content"> <p>lorum ipsom</p> </div> </div> </div> <div class="module_three"> <p>lorum ipsom</p> </div> <div class="footer"> <p>lorum ipsom</p> </div> </div>

en la muestra anterior, quiero cambiar el color de fondo para bg_container usando una matriz de colores.

¡Gracias por tu tiempo!