Fading/changing either background or text color over a timed period. NOT a transition.

Comments

• greyelf

  July 2016

  You need to state which Story Format you are using when you ask a question, as answers can be different for each one.
• scoopdjm

  July 2016

  whoops, sorry friend. Harlowe.
• greyelf

  July 2016

  You could use a (live:) macro with $counter variable to handle the countdown, and the CSS class adding code from the Basic Harlowe Passage Tag Based Styling thread to allow you to style based on the current value of the $counter variable.
  
  1. Use code like the following in your passage:

  (set: $counter to 10, $deactivated to false)
  
  You have $counter seconds to click on the following link!
  
  (link: "Deactivate Countdown")[
  	(set: $deactivated to true)
  ]
  
  (live: 1s)[
  	(if: $deactivated or $counter <= 0)[
  		(stop:)
  		(print: "<script>$('html').removeClass('fade-" + (text: $counter) + "'\)</script>")
  	] (else:)[
  		(set: $counter to it - 1)
  		(print: "<script>$('html').removeClass('fade-" + (text: $counter + 1) + "'\)</script>")
  		(print: "<script>$('html').addClass('fade-" + (text: $counter) + "'\)</script>")
  	]
  ]
  

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

  html.fade-9 {
  	background-color: transparent;
  	color: #000;
  }
  html.fade-8 {
  	background-color: transparent;
  	color: #000;
  }
  
  /* ... Other missing fade-X based selectors ... */
  
  html.fade-1 {
  	background-color: transparent;
  	color: #000;
  }
  html.fade-0 {
  	background-color: black;
  	color: #000;
  }
  

  
  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.

  html.fade-9 tw-story {
  	background-color: black;
  	color: #000;
  }
  html.fade-0 tw-story {
  	background-color: black;
  	color: #000;
  }
  
• scoopdjm

  July 2016

  Thanks Greyelf, this has been extremely helpful!