I am using sugarcube and I want to make the background change color gradually in every new passage, getting slightly brighter or darker depending on the path the player is following. Every single passage would be a (slightly) different color. I've been using <<addclass>> to put different colors in each passage, but I'm wondering if there's a way I can do that without having to make a new class each time, because that takes up a ton of room in the stylesheet and is very time consuming.
Thanks
Comments
If that doesn't change the colour of the whole page, perhaps you could change the passage attribute in your stylesheet to be 100% of the width and height of the body, then increase the padding to keep your text in the middle of the page.
@Focksbot could you show what that would look like?
@TheMadExile I think that using tags would be the best but I'm not sure how to go about doing that. I think I would want it so I could put a tag in a passage and then insert the hex color code into the passage to change its color. I don't know how to change the properties of a tag in a passage though. I could create a different tag for each differently colored passage in the stylesheet but that would give me the same problem as before
https://greensock.com/CSSPlugin
GSAP is easier to use with twine 1.4 though, since it you can put a userlib.js file in the SugarCube install directory and paste the GSAP installation code in there to get it to work. With 2.0, your only real option is to make a unique build for yourself where you alter the source HTML.
Once installed, in each passage you'd write something like
<<script>>
TweenLite.to("#passages", 2, {css:{backgroundColor:"#FF0000"}, ease:Power2.easeOut});
<</script>>
This would change the background color of the named element (in that example #passages, but it may be body depending on how your story is structured) to the color specified over the time specified, in this case 2 seconds (the first 2, not the easing).