Animated Astronomical Clock In jQuery - Starclock.js

Starclock.js is an innovative jQuery plugin that generates an animated representation of the solar system that serves as a clock.

It provides a unique way to keep track of the local time by using the positions of the sun and eight planets to indicate the current date and time on your website.

See Also:

• 10 Best Analog Clocks In JavaScript

How to use it:

1. Create the HTML for the Astronomical Clock.

<!-- Solar System -->
<div id="centune-orbit">
  <div id="centune">
    <div class ="planetary-text hidden" id="centune-text">
    </div>
  </div>
</div>
<div id="decadus-orbit">
  <div id="decadus">
    <div class ="planetary-text hidden" id="decadus-text">
    </div>
  </div>
</div>
<div id="yeurn-orbit">
  <div id="yeurn">
    <div class ="planetary-text hidden" id="yeurn-text">
    </div>
  </div>
</div>
<div id="monter-orbit">
  <div id="monter">
    <div class ="planetary-text hidden" id="monter-text">
    </div>
  </div>
</div>
<div id="wekars-orbit">
  <div id="wekars">
    <div class ="planetary-text hidden" id="wekars-text">
    </div>
  </div>
</div>
<div id="hourth-orbit">
  <div id="hourth">
    <div class ="planetary-text hidden" id="hourth-text">
    </div>
  </div>
</div>
<div id="minnus-orbit">
  <div id="minnus">
    <div class ="planetary-text hidden" id="minnus-text">
    </div>
  </div>
</div>
<div id="secondury-orbit">
  <div id="secondury">
    <div class ="planetary-text hidden" id="secondury-text">
    </div>
  </div>
</div>
<div id="sun">  
</div>

<!-- More Info -->
<div class ="planetary-text" id="sun-text">
  <span class="inner-text">00:00:00 | Sun, Jun 01, 1950</span>
  &nbsp;<i class="fa fa-toggle-off fa-lg" aria-hidden="true"></i>
</div>

2. Load the Starclock.js plugin after jQuery. That's it.

<link rel="stylesheet" href="/path/to/css/starclock.css" />       
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/js/starclock.js"></script>

---

This awesome jQuery plugin is developed by Chalarangelo. For more Advanced Usages, please check the demo page or visit the official website.