Задача:
Есть 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;
}