Crossfade background images between scenes

Scenes
1

Hi,
I am trying to build a project, where each scene has a different background image, I wish the background image to be static, and it shouldn’t move when I scroll.
I have managed to create the static background image by having an “html” style attribute in my head HTML: html { background: url(${resourcesFolderName}/MyBG.jpg) }
It’s working, but now I wish this background image to crossfade to another background image when I switch between scenes. I have tried doing this by running a javascript function on scene load: document.documentElement.style.background = "url(${resourcesFolderName}/SecondBG.jpg)";
It’s switching the backgrounds, but it wont provide me the crossfade effect between the backgrounds.
Is there any workaround to make this possible?

Thank You.

2

I dont understand why you want to do it in harder way.
you can just choose jump to scene, and choose crossfade for transition.
then each scene you can put background images that you want.
maybe you have a special reason that I don’t know yet.

3

I haven’t found any easier way to set a scene background image, only background color.
I used this article to change the background image: http://hype.desk.com/customer/portal/articles/241564-changing-the-background-color-of-your-document.

4

The simplest way to do this, is by having a function on each Scene load that changes the background of the page.

But something along the lines as:

$('body').css('background', 'black');

of a switch function that will do the same and accessible in one place:

switch(bg) {

case "home":	
	$('body').css('background', 'black');
break;

case "about":	
	$('body').css('background', 'yellow');
break
}

bgChangeOnScene.hype.zip (93.7 KB)

5

I found an easier fix, I just added transition: background 1.5s linear attribute to the html element in the head, and made the background change onload by document.documentElement.style.background = "url(${resourcesFolderName}/newBG.jpg) "; and that solved it.