Заливайте фоновый цвет постепенно в зависимости от положения прокрутки

Question

У меня есть div, и я хочу, чтобы он background color был заполнен на основе scroll позиции сверху. Ниже мой код -

HTML

<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>
<div id='Div'> 

</div>

<div> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</div>

CSS

#Div {
  background-color: red;
  height: 20px;
  width: 0%;
}

J-query

$(window).scroll(function(){;
    w = Math.floor( $(window).scrollTop() );  
   if (w > 5) {
         $('#Div').animate({ width: '100%' }, 1000);
   } else {
        $('#Div').animate({ width: '0%' }, 1000);
   }

}); 

Он работает нормально, но я обнаружил задержку во времени ответа. Заполнение не происходит быстро из-за положения cursor, так как мне нужно подождать несколько секунд, чтобы увидеть начало заполнения.

Fiddle - http://jsfiddle.net/bogaso/5r3afz7n/11/

Is есть ли способ сделать время отклика мгновенным?

Любая помощь будет принята с благодарностью.

Answer 1

Концепция

Определите две именованные анимации, используя правила css @keyframes, одну для расширения цветовой полосы, другую для ее сжатия. В зависимости от положения прокрутки запустите правильную анимацию. Чтобы выбрать правильный и ограничить запуск анимации при пересечении порога смещения прокрутки, в состояние записи вводится класс css colorized (в данном случае: смещение прокрутки> 5). Только если состояние изменилось, запускается анимация. Комбинация текущего смещения прокрутки и наличия / отсутствия класса colorize определяет, какую анимацию выбрать.

Jquery не требуется для управления анимацией, достаточно DOM API.

Посмотрите на эту скрипку .

Код

HTML

<div><!-- ... long text .....></div>
<div id='Div'>

</div>
<div><!-- ... even longer text .....></div>

CSS

#Div {
  background-color: red;
  height: 20px;
  width: 0%;
}

@keyframes colorize {
  from { width: 0%; }
  to   { width: 100%; }
}

@keyframes decolorize {
  from { width: 100%; }
  to   { width: 0%; }
}

JS

$(window).scroll(function(){
   let w = Math.floor( $(window).scrollTop() );
   let e = document.querySelector('#Div');

   if (w > 5) {
       if (! e.classList.contains("colorized")) {
           // Adjust the scrolling state proxy
           e.classList.add("colorized");

           // Animation name. Links the code to the CSS spec of start/end values of the animated attribute
           e.style.setProperty ( 'animation-name', 'colorize' );

           // Animation starts immediately
           e.style.setProperty ( 'animation-delay', '0s' );

           // It takes that long for the complete animation to complete. 
           e.style.setProperty ( 'animation-duration', '2s' );

           // The final state of the animated attribute persists.
           e.style.setProperty ( 'animation-fill-mode', 'forwards' );

           // The animation is run exactly once for each triggering event
           e.style.setProperty ( 'animation-iteration-count', '1' );
       }
   } else {
       if (e.classList.contains("colorized")) {
           e.classList.remove("colorized");
           e.style.setProperty ( 'animation-name', 'decolorize' );
           e.style.setProperty ( 'animation-delay', '0s' );
           e.style.setProperty ( 'animation-duration', '2s' );
           e.style.setProperty ( 'animation-fill-mode', 'forwards' );
           e.style.setProperty ( 'animation-iteration-count', '1' );
       }
   }
}); 

Расширение

В показанной версии цветной полоса переходит на полную ширину при запуске анимации decolorize. Визуально это не очень привлекательно, если выполняется обратная анимация colorize. Более сложное решение могло бы считывать текущую ширину div цветной полосы и соответственно устанавливать начальное значение соответствующей @keyframe анимации.