{"id":35706,"date":"2021-03-14T17:06:38","date_gmt":"2021-03-14T16:06:38","guid":{"rendered":"https:\/\/franktielemans.be\/blog\/?page_id=35706"},"modified":"2021-11-11T00:34:57","modified_gmt":"2021-11-10T23:34:57","slug":"change-background-color-on-scroll2","status":"publish","type":"page","link":"https:\/\/franktielemans.be\/blog\/change-background-color-on-scroll2\/","title":{"rendered":"change background color on scroll2"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Gradually change the background color of this page by scrolling.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Start scrolling <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t<\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Congratulations, you just changed from
#891FDD<\/b> to #1274DD<\/br><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

...and from
#1274DD<\/b> to #0EB788<\/br><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

All you need is a Javascript and a custom attribute in each section to define the colors. The sections act as markers so it's 100% responsive.<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Scroll down for the instructions...<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Change background color of the body element on scroll<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

You define the color via a custom attribute named data-color<\/strong>.<\/p>

Go to advanced tab of each section > attributes and define the background color as follows:
data-color | r, g, b<\/strong><\/p>

r stands for red
g for green
b for blue.<\/p>

Use\u00a0any color picker<\/a>\u00a0to read the RGB values<\/p>

For example, if you want a transition to black, you write:
data-color | 0,0,0<\/p>

To yellow:
data-color | 255,255,0<\/p>

and so on…

Important:<\/strong> You need at least 2 ‘markers’ on the page to make this work, otherwise there can’t be a transition between 2 colors.<\/p>

Also remember that sections and columns are always on top of the body element, so when you include a section with a background color, gradient,background image or video, the body background color will not be shown.<\/p>

Add an HTML element at the bottom of the page (or use the new custom code feature on the dashboard in Elementor > Custom Code) and copy – paste the script below.<\/p>

All credits to Bojan Gvozderac for the script, I found it on codepen<\/a>, I just made it work in Elementor.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t<script>\r\nvar colorSections = Array.prototype.slice.call( document.querySelectorAll('[data-color]') );\r\nvar backgroundColorArray = [];\r\nvar backgroundMask = document.querySelector(\"body\");\r\n\r\n\r\nvar BackgroundColorController = function(elem, index, colorStart, colorEnd) {\r\n  this.elem = elem;\r\n  this.index = index;\r\n\r\n  this.transitionRange = colorSections[index - 1].clientHeight;\r\n\r\n  this.colorStart = colorStart;\r\n  this.colorEnd = colorEnd;\r\n  this.colorDif = {\r\n    r: this.colorStart.r - this.colorEnd.r,\r\n    g: this.colorStart.g - this.colorEnd.g,\r\n    b: this.colorStart.b - this.colorEnd.b\r\n  };\r\n\r\n  this.colorTransition = {\r\n    r: ( this.colorDif.r === 0 ) ? 0 : Math.floor( this.transitionRange \/ this.colorDif.r ),\r\n    g: ( this.colorDif.g === 0 ) ? 0 : Math.floor( this.transitionRange \/ this.colorDif.g ),\r\n    b: ( this.colorDif.b === 0 ) ? 0 : Math.floor( this.transitionRange \/ this.colorDif.b )\r\n  };\r\n};\r\n\r\nBackgroundColorController.prototype.run = function() {\r\n  var boundingRectY = this.elem.getBoundingClientRect().top;\r\n\r\n  if( boundingRectY < this.transitionRange && boundingRectY > 0 ) {\r\n\r\n    var changeForR = ( this.colorTransition.r === 0 ) ? 0 : Math.floor( (this.transitionRange - boundingRectY) \/ this.colorTransition.r ),\r\n        changeForG = ( this.colorTransition.g === 0 ) ? 0 : Math.floor( (this.transitionRange - boundingRectY) \/ this.colorTransition.g ),\r\n        changeForB = ( this.colorTransition.b === 0 ) ? 0 : Math.floor( (this.transitionRange - boundingRectY) \/ this.colorTransition.b );\r\n\r\n    var r = this.colorStart.r - changeForR,\r\n        g = this.colorStart.g - changeForG,\r\n        b = this.colorStart.b - changeForB;\r\n\r\n    var colorChangeString = \"rgb(\" + r + \", \" + g + \", \" + b + \")\";\r\n\r\n    backgroundMask.style.backgroundColor = colorChangeString;\r\n  }\r\n};\r\n\r\ncolorSections.forEach(function(elem, index) {\r\n  if( index > 0 ) {\r\n    var colorStart = getSectionColorCode( colorSections[index - 1] );\r\n    var colorEnd = getSectionColorCode(colorSections[index]);\r\n    backgroundColorArray.push( new BackgroundColorController(elem, index, colorStart, colorEnd ) );\r\n  }\r\n}, this);\r\n\r\nfunction getSectionColorCode(sectionElem) {\r\n  var colorString = sectionElem.getAttribute('data-color');\r\n  var colorStringArray = colorString.split(',');\r\n  var colorNums = [];\r\n\r\n  colorStringArray.forEach(function(elem, index) {\r\n    colorNums.push(parseInt(elem));\r\n  }, this);\r\n\r\n  return { r: colorNums[0], g: colorNums[1], b: colorNums[2] };\r\n}\r\n\r\n\/\/ handle scroll event\r\nwindow.onscroll = function() {\r\n\r\n  backgroundColorArray.forEach(function(elem, index) {\r\n    elem.run();\r\n  }, this);\r\n\r\n};\r\nwindow.dispatchEvent(new Event('scroll'));\r\n<\/script><\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Gradually change the background color of this page by scrolling. Start scrolling Congratulations, you just changed from #891FDD to #1274DD &#8230;and from #1274DD to #0EB788 All you need is a Javascript and a custom attribute in each section to define the colors. The sections act as markers so it&#8217;s 100% responsive. Scroll down for the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_oct_exclude_from_cache":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-35706","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/35706","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/comments?post=35706"}],"version-history":[{"count":0,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/35706\/revisions"}],"wp:attachment":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/media?parent=35706"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/categories?post=35706"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/tags?post=35706"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}