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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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