Twine Version: 2.314
Story Format: Sugarcube 2.314
Hi everyone, still a novice at all things Twine/CSS/JavaScript, but trying to chug slowly along… However, I find myself stumped on how to make the entire game screen–header, menu, passage, and all–slowly fade to black when pressing a linking button! I think I’m trying to combine too many solutions I’m seeing online and having none of them work in the way that I can wrap my head around.
Here’s what I’ve tried. I’ve fiddled around with placing this in my Story JS file:
// blackscreen
if (tags().includes("fade")) {
Config.passage.transitionOut = 5000;
}
Then, on the passage I want to fade to black when exiting, I’ve tagged it with the [fade] tag; and I’ve linked it to a passage that is tagged with a [blackscreen] tag, which I’ve already styled in the CSS to be completely black (no header, menu, or passage showing). But I’m just not figuring out how to implement the fading transition between the two. Am I going about this the wrong way? Would Chapel’s fading macro work better for this? I’m trying to wrap my head around fading in an image (which I’m not sure how to fit across the entire screen, covering the menu and header as well as the passage) or fading/transition into an all-black passage itself, if that makes any sense.
If anyone has any idea of what I mean, I’d greatly appreciate any tips! Thank you for your time!