Getting Started

			      
$ bower install bg-color-morph

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

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

Start and End Triggers

Select where the color change starts and finishes. Options are top, middle, or bottom of viewport.

				    	
<section
	class="bg-morph"
	data-start-color="#f7b733"
	data-end-color="#fc4a1a"
	data-start-trigger="top"
	data-end-trigger="bottom">
	<h1>Section Content</h1>
	<p>Lorem ipsum dolor...</p>
</section>

Section Content

Lorem ipsum dolor amet hot chicken fingerstache normcore thundercats forage irony church-key keffiyeh copper mug prism. Lomo stumptown letterpress PBR&B. Stumptown butcher gastropub echo park marfa, neutra tote bag DIY hammock leggings keffiyeh kale chips. Stumptown photo booth distillery quinoa art party tacos beard, synth VHS glossier wolf yr slow-carb.

Cascade Them

			      
<section
	class="bg-morph"
	data-start-color="#ffffff"
	data-end-color="#fc4a1a"
	data-start-trigger="bottom"
	data-end-trigger="bottom">
	<h1>Section Content</h1>
</section>
<section
	class="bg-morph"
	data-start-color="#ffffff"
	data-end-color="#0575E6"
	data-start-trigger="bottom"
	data-end-trigger="bottom">
	<h1>Section Content</h1>
</section>
<section
	class="bg-morph"
	data-start-color="#ffffff"
	data-end-color="#00F260"
	data-start-trigger="bottom"
	data-end-trigger="bottom">
	<h1>Section Content</h1>
</section>

Enjoy!

				  
Repository: https://github.com/awmiklovic/BGColorMorph
Contact: awmiklovic@gmail.com