Author: | awmiklovic |
---|---|
Views Total: | 778 views |
Official Page: | Go to website |
Last Update: | December 24, 2018 |
License: | MIT |
Preview:

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.
<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>