Orbit: A CSS preprocessor experiment

orbit.css is an experiment with CSS preprocessors to create an easily consumable orbital effect for DOM. It can be easily tweaked and customized.

orbitcss

Usage

Firstly, include the stylesheet and second create the DOM structure:

<ul class="orbit">
      <li class="planet center">
        <div>
          <a>o</a>
        </div>
      </li>
      <li pause-on-hover data-orbit-width="1" data-orbit-depth="3" class="planet">
        <div>
          <a>r</a>
        </div>
      </li>
      <li pause-on-hover data-orbit-width="2" data-orbit-depth="3" class="planet">
        <div>
          <a>b</a>
        </div>
      </li>
    </ul>

Now define necessary data attributes and classes to different elements to achieve the desired behavior

Github
Website
License MIT