Howdy, Stranger!

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

How to get background to change after passage & linking without text

I'm currently trying to create my first Twine game after lurking here quite a bit and Googling frantically to solve my questions. Not very experienced with HTML and CSS but hoping to get better the more I fiddle with it!

I've stumbled upon a couple of things I'm not sure how to solve (please be patient as I'm still not too confident with all the technical terms):

I'm using Sugarcube 1.0.26 and I have written all the text for a particular passage which has white text on a black background. The text fades in and after all the text has appeared, I'd like the background to fade to white. Obviously the text is also white so it should appear as just a black white page to the reader.

I would also like to link to the next passage without using text or images - something like an automatic countdown transition would be ideal.

If anyone has any ideas how I can do that, I'd be super grateful!

Thanks :)


  • something like an automatic countdown transition would be ideal.

    This part's easy to resolve! You can install this macro into your game. It does precisely what you're asking for. Let me know if you're not sure how to use macros yet, and I can explain more~

    As for the fading, I do also have code for that, but it's rather clunky and homegrown. So I'll leave that aside for a day or two and see if anyone posts something smoother.
  • edited July 2016
    Background color is animatable. Therefore you can just use a simple css animation to do this, something in your css passage like:
    @-webkit-keyframes color {
      0% {
    	background-color: black;
      100% {
    	background-color: white;

    Then also in your css, if your background is referenced in body (I don't know where it is, if different you obviously have to change this) you'd write:
    body.whiteout {
    -webkit-animation: color 8000ms 1 forwards;

    "color" refers to the animation name, 8000ms is the time (generally you don't want simple fades too short, or else it looks crap), and 1 forwards says it should perform the animation 1 time and not reset back to 0% after the performance.

    Then at the story passage where you want to trigger this, you write in the relevant passage:
    <<addclass "body" "whiteout">>

    Then you can write all this in reverse to fade back to black if you want. But remember to use the <<removeclass>> macro to remove classes when you don't need them, or otherwise you won't be able to use <<addclass>>. See SugarCube's documentation for more details.

    Also I only specified -webkit- because I was copy pasting examples from my own story, and I only need webkit because I only deploy in nw.js. If writing for browsers, you might need additional animation rules for different browsers.
Sign In or Register to comment.