I'm trying to transition between background colors in a single section so that when a specific section (.bg_container) hits the top of the viewport the background color starts starts to smooth transition while scrolling. I've seen many examples of very nice background fades/transitions but they all assume that each section has it's own color.

The issue here is that i have more colors than sections, so i can't tie the background color to sections.

<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>

in the above sample i want to transition the background color for bg_container using a color array.

Thank you for your time!