Change Background Color On Scroll – Elementor Tutorial

Home Elementor Change Background Color On Scroll – Elementor Tutorial

June 23, 2021

In this video I will show you a fun and creative way to change your backgrounds when you scroll down the page.

Timestamps:

  • 0:00 Introduction
  • 0:26 CodePen Example
  • 1:01 Elementor Backend Setup
  • 1:53 Add CSS Code
  • 3:13 Add Custom JavaScript
  • 4:25 Add CSS Class & Attributes
  • 7:21 Testing

Elementor (Affiliate Link):https://trk.elementor.com/4776

CodePen Example: https://codepen.io/daveredfern/pen/zBGBJV

Elementor Custom Attributes (Pro): https://elementor.com/help/custom-attributes-pro/

CSS Code:

				
					body {
  transition: background-color 1s ease;
}
.color-blue {
  background-color: #2F8FED;
}
.color-green {
  background-color: #4DCF42;
}
.color-yellow {
  background-color: #FAEB33;
}
.color-orange {
  background-color: #F19031;
}
.color-red {
  background-color: #F2293A;
}

				
			

JavaScript Code:

				
					<script>
jQuery(function($){
    $(window).scroll(function() {
  
  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');
  
  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $panel.each(function () {
    var $this = $(this);
    
    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
       
      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();
});
</script>

				
			

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

More Free Resources