0 votes
by (3.5k points)
For example: I have a sentence "A quick brown fox jumps over the lazy dog" and I want the word fox to blink on-off-on-off. How could this be done in Harlowe?

Would it be possible to have two different words blink at different rates?

Any help would highly appreciated! :^)

1 Answer

+1 vote
by (159k points)
selected by
 
Best answer

You can use the (text-style: ) macro to apply a visual effect like "blink" to selected text, however you can't easily control the rate of it's animation.

(text-style: "blink")[The quick brown fox jumps over the lazy dog.]


note: The "blink" effect of the above macro is achieved by assigning a CSS animation to the HTML element containing the selected text, the element generated for the above associated hook looks something like the following.

<tw-hook style="animation: 1s steps(1, end) 0s infinite alternate none running fade-in-out;">The quick brown fox jumps over the lazy dog.</tw-hook>

... the above animation styling breaks down into individual CSS properties as follows:

animation-duration: 1s;
animation-timing-function: steps(1, end);
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: none;
animation-play-state: running;
animation-name: fade-in-out;


You could use the above information craft your own animation related CSS rules with different initial durations, and use specifically named hooks to apply them to selected text.

eg. The following CSS example defines a blink animation wiith a duration of 1/2 a second and associates it with any blink05s named hook, you would place this CSS rule within your project's Story Stylesheet area.

tw-hook[name="blink05s"] {
	animation-duration: 0.5s;
	animation-timing-function: steps(1, end);
	animation-delay: 0s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-fill-mode: none;
	animation-play-state: running;
	animation-name: fade-in-out;
}

... and you would use a named hook declaration like the following to apply the above effect to selected text.

|blink05s>[The quick brown fox jumps over the lazy dog.]

 

by (3.5k points)
Works like a charm! The blink05s example was super easy to use and very efficient.

Thanks for the help!
...