3

Задача:

Есть 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

1 ответ 1

2

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

//Установка прозрачности для заданного по номеру элемента
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);
        }
    });
})
3
  • Доброго времени суток, @evgenii-izhboldin! Все прекрасно работает, но не подскажете, как сделать, чтобы вся эта функция работала только в определенном div'e? Внутри этого блока нет скролла, это обычная секция с заголовком и картинкой и padding'ом в 100px. Соответственно $('.my-div').scroll(function() не работает, как заставить работать эту функцию в блоке высотой ~700, и чтобы пока мы скроллим в этих рамках, функция полностью отрабатывала?(т.е чтобы все кружки заполнялись прозрачностью). За решение отдельное спасибо! Очень выручили!
    – Frunky
    6 ноя 2016 в 16:24
  • @Frunky, как я вижу решение: если скролл глобальный, то листнер scroll вешаем так-же на window: $( window ).scroll(function() { ... }. И работаем от $('.my-div').offset().top до $('.my-div').offset().top + $('.my-div').height() по тому-же принципу. Пример здесь, там только div-second меняет цвета точек 6 ноя 2016 в 19:01
  • Это просто гениально! Все почти предельно просто! Спасибо огромное, Женя! Успехов Вам)
    – Frunky
    7 ноя 2016 в 4:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.