Image fade-in does not work in published file? Twine2 2.0.10, Harlowe 1.2.1

zoelibat

Hello everybody,

I'm using Twine 2 2.0.10 and the Story format Harlowe 1.2.1.

I want to have a background image fade-in each time I switch a passage.

I already found some code in the forum:

-webkit-transition: all 1s linear;
 		 transition: all 1s linear;

To be honest, I don't understand that bunch of code but it is working so that's okay for me.

At the moment, for every background image I use, my Style Sheet looks like this:

html.room1 body {
	background-image: url('where the room1 image is stored.jpg');
	background-attachment: fixed;
	-webkit-transition: all 1s linear;
 		 transition: all 1s linear;
}

html.window1 body {
	background-image: url('where the window1 image is stored.jpg');
	background-attachment: fixed;
	-webkit-transition: all 1s linear;
 		 transition: all 1s linear;
}

and so on.

But it is only working, when I test my story within twine by pressing the "Play" button.

When I "Publish to File" and open the file with my browser (firefox) there are no fade-ins at all and it is just switching from background image to the next background image instantly when I switch passages.

Now I have two questions:

1. How can I manage to get the fade-ins when running the published file?
2. How can I make my starting passage room1 fade-in when opening the storyfile?

I am still a novice regarding programming so an easy solution would be nice, if possible. Or if you know a better way how to get these things done, I would be thankful as well.

Thank you very much in advance!

zoelibat

I'm still searching the web for further information regarding this problem.

The problem was, that the fade-ins of my background images are working when I click "Play" in the local version of Twine2 but are not working when I "publish to file" and open the story with my browser.

Meanwhile I found some new stuff for compatibility with other browsers and my style sheet looks like this:

body {
	background-attachment: fixed;
	transition: 1s linear;
	-o-transition: 1s linear;
	-ms-transition: 1s linear;
	-moz-transition: 1s linear;
	-webkit-transition: 1s linear;
}

but unfortunately the problem is still the same.

Maybe something to add here:
I'm using a Header-passage with this code from greyelf (which is very helpful)

{
(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]
}

to get my background images displayed when I wirte my Style Sheet like this:

html.room1 body {
	background-image: url('backgroundimage room1.jpg');
}

Does it maybe have to do something with this?

Thank you very much in advance

TheMadExile

zoelibat wrote: »

I'm still searching the web for further information regarding this problem.

Your main problem is likely that the background-image property is not one that can be animated (per W3 standards)—some browsers allow it anyway, but support is hit/miss, so it's not something you should really depend on.

As one possible workaround, you could make several background layers for fading your backgrounds in/out, via animating their opacity. I've attached an example Twine 2 archive file (just import it).

The setup is fairly similar to what you were trying before, though there is a bit of JavaScript now (to setup the layers). The only thing you need to touch within the JavaScript is the value of BGLAYER_COUNT (which is the number of background layers you need). The CSS should, hopefully, be largely self-explanatory, though I will note that the background layers are numbered (starting at one).

The example should tick all your boxes, I'd think. All passages, even the starting passage, with a tagged background layer will have the layer fade-in/-out and adjacent passages with layers will have the layers cross-fade.

zoelibat wrote: »

Meanwhile I found some new stuff for compatibility with other browsers and my style sheet looks like this:

body {
	background-attachment: fixed;
	transition: 1s linear;
	-o-transition: 1s linear;
	-ms-transition: 1s linear;
	-moz-transition: 1s linear;
	-webkit-transition: 1s linear;
}

Tip: You have your properties backwards. If you're providing fallback properties in CSS, the fallbacks should always come first. For example, the above should be:

body {
	background-attachment: fixed;

	/* Fallback vendor-prefixed transition properties. */
	-webkit-transition: 1s linear;
	-moz-transition: 1s linear;
	-ms-transition: 1s linear;
	-o-transition: 1s linear;

	/* Standard transition property. */
	transition: 1s linear;
}

zoelibat

Thank you so much MadExile!

It's working perfectly fine now.

TheMadExile

zoelibat wrote: »

Thank you so much MadExile!

It's working perfectly fine now.

Great.

For anyone looking for the attached example file from my original post. The forums, unhelpfully, eat attachments on posts which are selected as answers. So, I'll attach the example file to this post as well.