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 realize a smooth change of the color of the balls when scrolling, if you scroll down - the colors, as it were, “run across” to the right, when you scroll upwards - to the left.

Now made only frame. In one div'e 2 span of the object - one is blue, the other is white. The idea is this, when scrolling, add white opa different opacity.

But how to do it - I have no idea.

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

Jsfiddle frame

    1 answer 1

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

     //Установка прозрачности для заданного по номеру элемента 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); } }); })
    • Good day, @ evgenii-izhboldin! Everything works fine, but do not tell me how to make this whole function work only in a specific div'e? Inside this block there is no scroll, this is a regular section with a title and a picture and padding at 100px. Accordingly, $ ('. My-div'). Scroll (function () does not work, how to make this function work in a block with a height of ~ 700, and so that while we scroll within this framework, the function will completely work out? (I.e so that all circles filled with transparency). Special thanks for the decision! Very much helped out! - Frunky
    • @Frunky, as I see the solution: if the scroll is global, then the scroll slider is also hung on the window : $( window ).scroll(function() { ... } . And we work from $('.my-div').offset().top to $('.my-div').offset().top + $('.my-div').height() by the same principle. Example here , there only div-second changes the colors of points - Evgenii Izhboldin
    • This is simply brilliant! It's all pretty easy! Thank you very much, Marrying! Successes to you) - Frunky