Transition Between Background Colors On Scroll – Background Color Morph

Background Color Morph is a small (2kb minified) JavaScript library that applies a transition effect to background colors when scrolling down or up the webpage.

How to use it:

Import the JavaScript bg-color-morph.min.js and Stylesheet bg-color-morph.css into the document.

<link href="dist/bg-color-morph.css" rel="stylesheet">
<script src="dist/bg-color-morph.min.js"></script>

Add the required CSS class bg-morph to the target container.

<section class="bg-morph">
  Content here 
</section>

Set the start and end colors in hex.

<section class="bg-morph"
         data-start-color="#f7b733"
         data-end-color="#fc4a1a">
  Content here 
</section>

Set the start/end trigger points.

<section class="bg-morph"
         data-start-color="#f7b733"
         data-end-color="#fc4a1a"
         data-start-trigger="top"
         data-end-trigger="middle">
  Content here 
</section>