Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Fade In for Background Images

Hi everyone,

i'm working with Twine 1.4.2 and Sugarcane.

I used the body[data-tags] to change my background image for each new passage, which is working all fine.

What i wanted to do now, is have the background images fade in when i enter the passage. Heres my problem:

It works on the 1st image, but not on the 2nd or 3rd one. But if i delete the transition effect of the 2nd one and just have it on the 1st and 3rd one, the effect on the 3rd image is working as well!??

Does someone have an idea why that is or how i can fix it, so that i can have the effect on every background image?

I can provide the code and css if its needed to figure stuff out.

Any help is gladly appreciated!

Cheers & thanks


  • A transition effect generally fires when the property it is based on is changed, in the case of fade-in and fade-out that is generally the opacity property changing from 0 to 1 (or 1 to 0 in the case of fade-out).

    Your first issue is that background-images don't have their own opacity property, so you have to use the one for the element that the background-image is attached to.

    Your second issue will be finding some way to change the opacity property to some other value between the first background-image and the second, because the CSS select for both of the background-images will have an opacity property of 1.

    This issue is the subject of the Sugarcube Stylesheets and Background Images thread.

    The way the story formats generally do this internally is to use a mixture of Javascript and CSS.
  • Thank you, greyelf.

    Can't seem to wrap my head around all this. But your thread is very informative, i'll give it another try some time.
Sign In or Register to comment.