Ok, so what I'm looking to do here is have the passage background (or text, either will work) color slowly fade to black as a 10 second timer counts down and have it reset to its original color when the player comes back to the passage. (It's looped; the player has to click a button to reset the passage before the 10 seconds is up or it's game over.)
Possible? Ideas?
Thanks for taking the time to read/answer!
Comments
1. Use code like the following in your passage: ... it adds a series of CSS class names (fade-9, fade-8, .... fade-1, fade-0) to the story's HTML element which you can use as part of a CSS selector to style the story.
2. Styling the story.
There are many ways you could do this using CSS, I will leave which method you use up to you but some of them are:
a. background-color property
b. (fore-ground/font) color property
c. opacity property
The other important decision you need to make is whither you want your styling to effect the whole page or just the area where the passage text appears:
a. The whole page.
Harlowe's default fore-ground and back-ground colours are set at the HTML element level so you will need to use CSS like the following.
note: I have only supplied the first two and the last two CSS selectors but Im sure you can implement the middle set yourself based on my examples. I have included in the fade-9 to fade-1 selectors the default values Harlowe sets which you will need to replace with your own values, the fade-0 selector is set to black-on-black.
b. The Passage text area.
I have only included examples of the fade-9 and the fade-0 selectors, but basically all you need to do is extend the selectors from the above example to include the tw-story element.