Using marquees in Harlowe with CSS

Hanzor · April 2016

I'm currently making a game in Harlowe and am using marquees. I have used CSS to do this, and my code so far is:

.marquee {
position: absolute;
white-space: nowrap;
-webkit-animation: rightThenLeft 3s linear infinite;
}

@-webkit-keyframes rightThenLeft {
0% {left: 0%;}
50% {left: 100%;}
100% {left: 0%;}
}

With this in the actual passage;

<div class="marquee">This is a marquee!</div>

I want to be able to set different marquees to different speeds, if possible, within the same passage, but within different passages would also work. I tried putting

html.fast {

before the css, to try and tell it to do this in passages tagged with fast, as this is what I used when changing individual passage colours, but no luck. Is this possible? I thought about trying to set the speed of the marquee to random so that it would be a different speed every time but haven't gotten anywhere.

Anyone have any creative ideas for this? Thank you!

greyelf · April 2016

Please use the C button in the tool-bar above the Comment field to wrap your code examples in a code tag, it makes them easier to read/find.

I am going to assume you are using code like that in the Basic Harlowe Passage Tag Based Styling thread to add tag based styling to your Harlowe based story.

Your CSS examples only include webkit based animation properties which are not supported by all web-browsers. The following fixes that issue and also adds a fast tag based selector which you can use to change the speed (duration) of the animation effect.

@-webkit-keyframes rightThenLeft {
	0% {left: 0%;}
	50% {left: 100%;}
	100% {left: 0%;}
}
@keyframes rightThenLeft {
	0% {left: 0%;}
	50% {left: 100%;}
	100% {left: 0%;}
}

.marquee {
	position: absolute;
	white-space: nowrap;

	-webkit-animation: rightThenLeft;
	-webkit-animation-duration: 3s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	animation: rightThenLeft;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

html.fast .marquee {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}

... the above changes the marquee duration from 3s to 1s for any passage with a fast tag.

Howdy, Stranger!

Categories

Using marquees in Harlowe with CSS

Comments