Jump to content
GreenSock

Sunflair

Target body {background-image)

Go to solution Solved by OSUblake,

Recommended Posts

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 by Sunflair
neglected to say what language I was using.
Link to comment
Share on other sites

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

 

 

  • Like 1
Link to comment
Share on other sites

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

  • Solution

You'll need to use regular images as you can't animate the background image of the body like that.

 

 

  • Like 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×