This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
I was experimenting with animating a planet for the new NEJSCONF web site (early bird tickets now available) and stumbled upon this amazingly detailed Codepen of our Solar System. Fortunately, it did exactly what I wanted—so I set out to parse the CSS secrets (nay, Tricks) within. While the code didn’t make it in to the final site, I thought I’d publish a pared down version of the demo in case someone else might find the simplified CSS useful.
Demo #
Download as .zip #
This is the general idea, without any extra demo style junk:
And this video is a really good, simple explanation of how it works. Look at that plane rotate.
Here’s a more polished view, with demo styles and images. These extra styles are separated out on the demo page, to make it easier to understand what’s going on.
Requirements #
This demo uses CSS variables because it makes it easier to read the code and see which pieces are related. I’d recommend removing those if you’re gonna put this into production.
Update: sorry for the framerate of those videos. I’m using Kap and I’ve bumped up the default FPS for next time.
Retweet to share this post
This content originally appeared on Zach Leatherman and was authored by Zach Leatherman
Zach Leatherman | Sciencx (2017-05-17T05:00:00+00:00) Quick Demo: Animating on an Oval Path. Retrieved from https://www.scien.cx/2017/05/17/quick-demo-animating-on-an-oval-path/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.