I want to animate text so that one word orbits around another, like the sun and moon. I’m new to this so I’m not even sure where to start. Any help would be appreciated!
(I’m hoping to do this with text rather than a graphic, like a video or gif)
Twine version: 2.5.1
Story format: Harlowe 3.3.3
like the sun and moon
[For clarity sake] the Moon orbits around the Earth, and the Earth orbits around the Sun.
The following is based on the CSS Orbit Animation example written by Alan Dunning, and uses Harlowe’s Named Hooks instead of <div> elements to define the structural relationships between the relevant components.
1: the Passage content to define the space, Earth and Moon components.
{
|space>[
|earth>[Earth]
|moon>[Moon]
]
}
note: Collapsing whitespace markup is being used in the above formatted code to suppress all unwanted line-breaks.
2: the CSS used to layout the components and animate the Moon, this code should be placed within your project’s Story Stylesheet area.
tw-hook[name="space"] {
display: inline-block;
position: relative;
top: 25px;
left: 25px;
height: 300px;
width: 300px;
text-align: center;
line-height: 300px;
}
tw-hook[name="earth"] {
color: blue;
}
tw-hook[name="moon"] {
position: absolute;
top: 75px;
left: 75px;
width: 150px;
height: 150px;
-webkit-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
I strongly suggest you lookup any unfamiliar CSS properties/techniques on the Mozilla Developer Network web-site.
eg. like position or Using CSS animations