change background color on scroll

change-background-color-on-scroll.markdown

change background color on scroll

A Pen by Frendhi on CodePen.

License.

index.html

<div class="container flex flex-wrap mx-auto">
  <div class="section w-full text-white" style="background-color: #000;">
    Section 1
  </div>
  <div id="section-2" class="section w-full" style="background-color: #fffff;">
    Section 2
  </div>
<div>

script.js

window.section2Animate = true;
$(window).scroll(function () {
      var section2AnimateScrollPosition =  ($('#section-2').outerHeight()/2);
      console.log("Current Scroll Position: "+$(window).scrollTop());
      console.log("Target Scroll trigger: "+section2AnimateScrollPosition);
      if (window.section2Animate && ( $(window).scrollTop() > section2AnimateScrollPosition ) ) {
        console.log('ANIMATION TRIGGERED!')
        window.section2Animate = false;
        $('#section-2').html('Changing background color!');
        $('#section-2').velocity({
          "backgroundColor": "#000",
          "color": "#fff"
        }, {
          duration: 5000,
          easing: "easeOutQuint",
          complete: function() {
            $('#section-2').velocity({
              "color": "#fff"
            }, {
              duration: 2000,
              easing: "easeOutQuint",
            });
          }
        });
      }
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.2/velocity.min.js"></script>

style.css

.section {
  min-height: 100vh;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css" rel="stylesheet" />