Hi @extra-vitamins
I cannot write you the whole code because of time issues but I try to explain as best as I can.
When you change a slide the BODY class changes the slide number:
fp-viewing-1 -> fp-viewing-2 -> fp-viewing-3.
- So first you need to make an array of colors you want display.
Similar to this one:
var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
-
Then you need to find out which slide is activated.
-
Then you need to use the current slide to get the color you have in the array.
Somewhere here:
jQuery('body').css('background-color', color);
I post you this example which generates a random background color. So you can sue it as a start.
<script>
var colors = ["#fff", '#000', '#f0f', '#0ff', '#00f', '#ff0', '#0f0']
window.laytheme.on("newpageshown", function(){
var ix = getRandomInt(0, colors.length);
var color = colors[ix];
jQuery('body').css('background-color', color);
});
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// Returns a random integer between min (included) and max (excluded)
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
</script>
I hope I could help!
Marius