Менять цвет 4х элементов при скролле(jQuery)

335

26 ноября 2016, 19:44

Задача:

Есть 10 шарика, первые 4 с прозрачностью( 1й - белый, 2 - светло-голубой, 3 - голубой, 4 - синеватый), оставшиеся все синие. Нужно реализовать плавную смену цвета шариков при скролле, если скроллить вниз - цвета как бы "перебегают" вправо, при сколле вверх - влево.

Сейчас сделан только каркас. В одном div'e 2 span объекта - один синий, другой белый. Мысль такая, при скролле добавлять белому span'у разные opacity.

Но как это сделать - понятия не имею.

Спасибо за внимание!

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

Каркас на jsfiddle

Answer 1

Основываясь на английской версии, написал пример на базе Вашей заготовки

//Установка прозрачности для заданного по номеру элемента
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);
        }
    });
})