New Text that Bolds and then goes to normal

huntsfromshadow

So I have the following text from the Harlowe example.

Your [ballroom gown]<c1| is [bright red]<c2| with [silver streaks]<c3|, and covered in [moonstones]<c4|.

(click: ?c1)[A hand-me-down from your great aunt.]
(click: ?c2)[A garish shade, to your reckoning.]
(click: ?c3)[Only their faint shine keeps them from being seen as grey.]
(click: ?c4)[Dreadfully heavy, they weigh you down and make dancing arduous.]

I'm trying to have the new text appear as bolded text and then a second later have it return to normal. Doing this as a way to help draw the player's eyes to new text.

Any thoughts? Similarly if it is a complicated nesting of macros is their anyway to make a custom macro that I can call repeatedly.

Thanks

greyelf

If your example is meant to replace the text within the named hooks with the text within the related (click:) macros then I suggest you use the (click-replace:) macros instead.

Your [ballroom gown]<c1| is [bright red]<c2| with [silver streaks]<c3|, and covered in [moonstones]<c4|.

(click-replace: ?c1)[A hand-me-down from your great aunt.]
(click-replace: ?c2)[A garish shade, to your reckoning.]
(click-replace: ?c3)[Only their faint shine keeps them from being seen as grey.]
(click-replace: ?c4)[Dreadfully heavy, they weigh you down and make dancing arduous.]

You could use CSS to animate the replacement text, first showing it with a font-weight of bold and then after a delay change the font-weight to normal. A way to identify the replacement text is needed so that the CSS knows what to animate, the following example used an em element to do this but you could also use a classed span element.

a. Example passage contents:

Click on [this link]<link| and the replacement text should be bold for 3 second.
(click-replace: ?link)[<em>the text to bold</em>]

b. The CSS used to animate the replacement text, place this in the Story Stylesheet.

@keyframes hightlight {
	from {font-weight: bold;}
	to {font-weight: normal;}
}
em {
	animation-name: hightlight;
	animation-duration: 5s;
}

warning: the above animation may not work in all web-browsers.

huntsfromshadow

@greyelf

The code works but not in the Twine desktop application on OSX.

Still it does work. I just may be what I'm thinking of is not easily done.

greyelf

huntsfromshadow wrote: »

The code works but not in the Twine desktop application on OSX.

The Test and Play options of the Twine 2 installable application have a couple of issues that don't occur in a HTML file generated using Publish to File, like not playing sound correctly, the animate CSS may be another one of those issues.