Howdy, Stranger!

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

Changing background colors in every passage

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

  • Could you create a div with a width and height of 100% in the stylesheet, then call that div into each passage at the start and give it a unique background-color style?

    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.
  • Would tagging each passage with a special tag be acceptable?
  • Sorry for no reply for a while, I took a break from this story, but I do still need to solve this problem.

    @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
  • edited July 2016
    You can do this easily with the GSAP CSS plugin to tween the background-color css property as you go along.

    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).
Sign In or Register to comment.