Is it possible to change background randomly?

Question

I have some background images (bg01.jpg, bg02.jpg, bg03.jpg, etc.) and I want these images to appear randomly in each passage.

Can someone help me?

Answer 1

I'd start with putting something like the following in your Story JavaScript:

setup.backgrounds = [
	// Put your image paths here.
	"bg01.jpg",
	"bg02.jpg",
	"bg03.jpg",
	"etc.jpg"
];
setup.randomBackground = function () {
	$(document.body).css(
		'background-image',
		'url(' + setup.backgrounds.random() + ')'
	);
};
setup.clearBackground = function () {
	$(document.body).css('background-image', 'none');
};

Once that's done, you have a couple of choices.

 

1. If you want the backgrounds to only appear in certain passages, then you could put the following at the top of each passage:

<<run setup.randomBackground()>>\

You may clear the current background with:

<<run setup.clearBackground()>>\

 

2. On the other hand, if you want them to appear in most passages, then you'll probably want to put the following in the PassageReady special passage instead:

<<if tags().includes("nobg")>>
	<<run setup.clearBackground()>>
<<else>>
	<<run setup.randomBackground()>>
<</if>>

Then you simply tag any passage you do not wish to receive a background with nobg.

Comments

It's work! Thanx a lot!!!