$ 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>
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>
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.
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.
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.
<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>
Repository: https://github.com/awmiklovic/BGColorMorph
Contact: awmiklovic@gmail.com