Description:

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.

1	<link href="dist/bg-color-morph.css" rel="stylesheet">

2	<script src="dist/bg-color-morph.min.js"></script>

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

1	<section class="bg-morph">

2	Content here

3	</section>

Set the start and end colors in hex.

1	<section class="bg-morph"

2	data-start-color="#f7b733"

3	data-end-color="#fc4a1a">

4	Content here

5	</section>

Set the start/end trigger points.

1	<section class="bg-morph"

2	data-start-color="#f7b733"

3	data-end-color="#fc4a1a"

4	data-start-trigger="top"

5	data-end-trigger="middle">

6	Content here

7	</section>

Demo: Link

Download: Github

JavaScript