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

Comments

• litrouke

  July 2016

  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.
• Claretta

  July 2016 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.