{"id":1702,"date":"2019-01-03T21:25:17","date_gmt":"2019-01-03T21:25:17","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=1702"},"modified":"2019-06-01T19:02:46","modified_gmt":"2019-06-01T19:02:46","slug":"background-color-morph-transition-between-background-colors-on-scroll","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/javascript\/background-color-morph-transition-between-background-colors-on-scroll\/","title":{"rendered":"Background Color Morph: Transition Between Background Colors On Scroll"},"content":{"rendered":"\n

Description:<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n\n\n\n\n

How to use it:<\/h3>\n\n\n\n

Import the JavaScript bg-color-morph.min.js<\/code> and Stylesheet bg-color-morph.css<\/code> into the document.<\/p>\n\n\n\n
1<\/code><\/td><<\/code>link<\/code> href<\/code>=<\/code>\"dist\/bg-color-morph.css\"<\/code> rel<\/code>=<\/code>\"stylesheet\"<\/code>><\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
2<\/code><\/td><<\/code>script<\/code> src<\/code>=<\/code>\"dist\/bg-color-morph.min.js\"<\/code>><\/<\/code>script<\/code>><\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n

Add the required CSS class bg-morph to the target container.<\/p>\n\n\n\n
1<\/code><\/td><<\/code>section<\/code> class<\/code>=<\/code>\"bg-morph\"<\/code>><\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
2<\/code><\/td>Content here<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
3<\/code><\/td><\/<\/code>section<\/code>><\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n

Set the start and end colors in hex.<\/p>\n\n\n\n
1<\/code><\/td><<\/code>section<\/code> class<\/code>=<\/code>\"bg-morph\"<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
2<\/code><\/td>data-start-color<\/code>=<\/code>\"#f7b733\"<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
3<\/code><\/td>data-end-color<\/code>=<\/code>\"#fc4a1a\"<\/code>><\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
4<\/code><\/td>Content here<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
5<\/code><\/td><\/<\/code>section<\/code>><\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n

Set the start\/end trigger points.<\/p>\n\n\n\n
1<\/code><\/td><<\/code>section<\/code> class<\/code>=<\/code>\"bg-morph\"<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
2<\/code><\/td>data-start-color<\/code>=<\/code>\"#f7b733\"<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
3<\/code><\/td>data-end-color<\/code>=<\/code>\"#fc4a1a\"<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
4<\/code><\/td>data-start-trigger<\/code>=<\/code>\"top\"<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
5<\/code><\/td>data-end-trigger<\/code>=<\/code>\"middle\"<\/code>><\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
6<\/code><\/td>Content here<\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n
7<\/code><\/td><\/<\/code>section<\/code>><\/code><\/td><\/tr><\/tbody><\/table>\n\n\n\n

Demo<\/strong>: Link<\/a><\/p>

Download<\/strong>: Github<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

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.<\/p>\n","protected":false},"author":2,"featured_media":1718,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[12],"tags":[87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/03\/Transition-Between-Background-Colors-On-Scroll-Background-Color-Morph.png","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-rs","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1702"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=1702"}],"version-history":[{"count":1,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1702\/revisions"}],"predecessor-version":[{"id":1719,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/1702\/revisions\/1719"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/1718"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=1702"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=1702"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=1702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}