Gradually change the background color of this page by scrolling.

Start scrolling

Congratulations, you just changed from
#891FDD to #1274DD

...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's 100% responsive.

Scroll down for the instructions...

Change background color of the body element on scroll

You define the color via a custom attribute named data-color.

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

r stands for red
g for green
b for blue.

Use any color picker to read the RGB values

For example, if you want a transition to black, you write:
data-color | 0,0,0

To yellow:
data-color | 255,255,0

and so on…

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

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.

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.

All credits to Bojan Gvozderac for the script, I found it on codepen, I just made it work in Elementor.

				
					<script>
var colorSections = Array.prototype.slice.call( document.querySelectorAll('[data-color]') );
var backgroundColorArray = [];
var backgroundMask = document.querySelector("body");


var BackgroundColorController = function(elem, index, colorStart, colorEnd) {
  this.elem = elem;
  this.index = index;

  this.transitionRange = colorSections[index - 1].clientHeight;

  this.colorStart = colorStart;
  this.colorEnd = colorEnd;
  this.colorDif = {
    r: this.colorStart.r - this.colorEnd.r,
    g: this.colorStart.g - this.colorEnd.g,
    b: this.colorStart.b - this.colorEnd.b
  };

  this.colorTransition = {
    r: ( this.colorDif.r === 0 ) ? 0 : Math.floor( this.transitionRange / this.colorDif.r ),
    g: ( this.colorDif.g === 0 ) ? 0 : Math.floor( this.transitionRange / this.colorDif.g ),
    b: ( this.colorDif.b === 0 ) ? 0 : Math.floor( this.transitionRange / this.colorDif.b )
  };
};

BackgroundColorController.prototype.run = function() {
  var boundingRectY = this.elem.getBoundingClientRect().top;

  if( boundingRectY < this.transitionRange && boundingRectY > 0 ) {

    var changeForR = ( this.colorTransition.r === 0 ) ? 0 : Math.floor( (this.transitionRange - boundingRectY) / this.colorTransition.r ),
        changeForG = ( this.colorTransition.g === 0 ) ? 0 : Math.floor( (this.transitionRange - boundingRectY) / this.colorTransition.g ),
        changeForB = ( this.colorTransition.b === 0 ) ? 0 : Math.floor( (this.transitionRange - boundingRectY) / this.colorTransition.b );

    var r = this.colorStart.r - changeForR,
        g = this.colorStart.g - changeForG,
        b = this.colorStart.b - changeForB;

    var colorChangeString = "rgb(" + r + ", " + g + ", " + b + ")";

    backgroundMask.style.backgroundColor = colorChangeString;
  }
};

colorSections.forEach(function(elem, index) {
  if( index > 0 ) {
    var colorStart = getSectionColorCode( colorSections[index - 1] );
    var colorEnd = getSectionColorCode(colorSections[index]);
    backgroundColorArray.push( new BackgroundColorController(elem, index, colorStart, colorEnd ) );
  }
}, this);

function getSectionColorCode(sectionElem) {
  var colorString = sectionElem.getAttribute('data-color');
  var colorStringArray = colorString.split(',');
  var colorNums = [];

  colorStringArray.forEach(function(elem, index) {
    colorNums.push(parseInt(elem));
  }, this);

  return { r: colorNums[0], g: colorNums[1], b: colorNums[2] };
}

// handle scroll event
window.onscroll = function() {

  backgroundColorArray.forEach(function(elem, index) {
    elem.run();
  }, this);

};
window.dispatchEvent(new Event('scroll'));
</script>