Full snippets

Опубликовано: 07 Май 2026
на канале: WPBakery
1,486
like

This is how you recreate a background color change effect on WordPress with WPBakery

CSS:
body {
transition: background-color 1s ease;
}

JavaScript:
jQuery(document).ready(function($) {
$(window).scroll(function() {
var $window = $(window),
$body = $('body'),
scroll = $window.scrollTop() + ($window.height() / 3),
maxScroll = $(document).height() - $window.height(),
scrollFraction = scroll / maxScroll;

// Define color stops
var colors = ['#FF8B00', '#6AC2B9', '#44244D', '#1F4F5D', '#FF8B00'];

var hue = Math.floor(scrollFraction * (colors.length - 1));

var color = colors[hue];
$body.css('background-color', color);
}).scroll();
});

#wpbakery
#wordpress #webdevelopment