One way to create an eye-catching design is by incorporating color cycling backgrounds into your Divi sections. This effect allows the background color of a section to change in response to the user's scroll, cycling through a spectrum of colors akin to a rainbow. Here's how to set up this effect.
Implement Color Cycling in Divi using jQuery and CSS
To apply this effect, we'll use a combination of jQuery and CSS. The setup includes adding a specific CSS class to your section, and then integrating some custom code into the Divi theme.
Step 1: Add a CSS Class
Begin by assigning a CSS class to the section you want to animate. In the Divi Builder, open the section settings and enter the class name db-color-cycle-on-scroll in the CSS Class field.
Step 2: Insert Custom CSS and jQuery
Next we'll incorporate a small piece of code into your Divi theme to handle the color cycling. Navigate to "Divi > Theme Options > Integration" and paste the following code into the "Add code to the <head> of your blog" section:
<style>
.db-color-cycle-on-scroll {
transition: background-color 700ms ease;
}
</style>
<script>
jQuery(document).ready(function($) {
var colors = ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#9400d3'];
var currentColor = 0;
var $section = $('.db-color-cycle-on-scroll');
var isScrolling;
$(window).on('wheel', function(event) {
clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
if(event.originalEvent.deltaY > 0) {
// Scroll down
currentColor = (currentColor + 1) % colors.length;
} else {
// Scroll up
currentColor = (currentColor - 1 + colors.length) % colors.length;
}
$section.css('background-color', colors[currentColor]);
}, 150);
});
});
</script>Step 3: Test the Effect
After inserting the code, publish your changes and view the page. As you scroll up and down, you should notice a smooth transition between colors.
For best results, apply this effect on an element that remains visible on the page at all times – otherwise the act of scrolling to cycle colors may also scroll the element itself out of view.
Hello,
What should be added as a variable so that when the sector appears and we enter the sector from the top we display one color and when we exit from the top we display another color.
here there would only be two colors.
Thanks
Hey AlainG, are you able to clarify what you mean by enter the section from the top? Do you mean when the mouse enters it, or when it scrolls past a certain point in the screen, for example? Thanks!
Wow! Thanks!
You're welcome, A Z :)