javascript – Change color of 4 elements when scrolling (jQuery)

Question:

Task:

There are 10 balls, the first 4 with transparency (1st – white, 2 – light blue, 3 – blue, 4 – bluish), the rest are all blue. It is necessary to implement a smooth change of the color of the balls when scrolling, if you scroll down – the colors seem to "run over" to the right, when scrolling up – to the left.

Now only the frame is made. In one div there are 2 span objects – one blue, the other white. The idea is to add different opacity to the white span when scrolling.

But I have no idea how to do it.

Thank you for your attention!

html

<div class="section">
  <div class="woman-spine">
    <div class="dot" data-scroll="1">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="2">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="3">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="4">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="5">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="6">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="7">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="8">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="9">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
    <div class="dot" data-scroll="10">
      <span class="spine-dot"></span>
      <span class="spine-dot-white"></span>
    </div>
  </div>
</div>

css

body{ height: 1200px; }
.section { padding: 150px 0; }
.woman-spine { position: absolute; top: 87%; left: 24%; width: 50%; }
.dot { 
    position: relative; float: left; margin-right: 3%; 
    width: 15px; height: 15px; 
 }
.spine-dot { 
    position: absolute; width: 15px; height: 15px;
    border-radius: 50%; background: #00aeef; 
 }
.spine-dot-white {
    position: absolute; width: 15px; height: 15px;
    border-radius: 50%; background: #FFF; opacity: 0; 
 }

Wireframe on jsfiddle

Answer:

Based on the English version , I wrote an example based on your template

//Установка прозрачности для заданного по номеру элемента
function setDotOpacity(dotNumber, opacity) {
    var dotElement = $('div[data-scroll='+dotNumber+'] .spine-dot-white');
    dotElement.css('opacity', opacity);
}

$(document).ready(function(){
    //Шаг по высоте для сдвига цвета
    //12 = 10 + 2, т.к. цвет меняется еще вокруг элемента, 
    //чтобы на первом и последнем не останавливалось на 50% opacity
    var hdot = $(document).height() / (12);

    $( window ).scroll(function() {
        //Расчитываем где центр
        var dotCenter = Math.round($(window).scrollTop() / hdot);

        //Центр делаем полупрозрачным
        setDotOpacity(dotCenter, 0.5);

        //Все что левее центра делаем белым
        for (var i = 0; i < dotCenter; i++) {
            setDotOpacity(i, 1);
        }

        //Все что правее центра делаем синим
        for (var i = dotCenter+1; i <= 10; i++) {
            setDotOpacity(i, 0);
        }
    });
})