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>
