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?
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.
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.