Sunflair Posted January 18, 2022 Share Posted January 18, 2022 (edited) I am working on a program that transitions the background image depending the level the player is on. The line of code is: document.body.style.backgroundImage =`url(/dist/asset.round${round}.png)`; I would like the background to fade in or out to reveal the next level's background image. I am really not picky about the transition, I just want to get rid of the abruptness of the change. How do I target the background image to alter opacity, duration 2? I am working in Javascript. Edited January 18, 2022 by Sunflair neglected to say what language I was using. Link to comment Share on other sites More sharing options...
OSUblake Posted January 18, 2022 Share Posted January 18, 2022 Welcome to the forums @Sunflair You really can't fade something if you've removed it. 😉 You would need to stack your images on top of each other and then you can animate between them, kind of like in this demo. See the Pen NWamOQY by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
Sunflair Posted January 18, 2022 Author Share Posted January 18, 2022 If I were working with regular images, I could do it. I don't know how to 'touch' background image in the Body. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted January 18, 2022 Solution Share Posted January 18, 2022 You'll need to use regular images as you can't animate the background image of the body like that. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now