Skip to content

Instantly share code, notes, and snippets.

@webfella

webfella/index.html

Created September 11, 2012 01:40
Download ZIP

Revisions

  1. webfella created this gist Sep 11, 2012.
    132 changes: 132 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,132 @@
    <body class="view-2D zoom-large opening hide-UI">
    <h1>3D CSS Solar System</h1>
    <div id="subnav" class="sub nav">
    <a class="sun" title="sun" href="#sunspeed">Sun</a>
    <a class="mercury" title="mercury" href="#mercuryspeed">Mercury</a>
    <a class="venus" title="venus" href="#venusspeed">Venus</a>
    <a class="earth active" title="earth" href="#earthspeed">Earth</a>
    <a class="mars" title="mars" href="#marsspeed">Mars</a>
    <a class="jupiter" title="jupiter" href="#jupiterspeed">Jupiter</a>
    <a class="saturn" title="saturn" href="#saturnspeed">Saturn</a>
    <a class="uranus" title="uranus" href="#uranusspeed">Uranus</a>
    <a class="neptune" title="neptune" href="#neptunespeed">Neptune</a>
    </div>
    <div class="controls">
    <label class="set-view">
    <input type="checkbox">
    </label>
    <label class="set-zoom">
    <input type="checkbox">
    </label>
    <label>
    <input type="radio" id="set-speed" name="scale" checked>
    <span>Speed</span>
    </label>
    <label>
    <input type="radio" id="set-size" name="scale">
    <span>Size</span>
    </label>
    <label>
    <input type="radio" id="set-distance" name="scale">
    <span>Distance</span>
    </label>
    </div>
    <div id="universe" class="scale-stretched">
    <div id="galaxy">
    <div id="solar-system" class="earth">
    <div id="mercury" class="orbit">
    <div class="pos">
    <div class="planet">
    <dl class="infos">
    <dt>Mercury</dt>
    <dd><span></span></dd>
    </dl>
    </div>
    </div>
    </div>
    <div id="venus" class="orbit">
    <div class="pos">
    <div class="planet">
    <dl class="infos">
    <dt>Venus</dt>
    <dd><span></span></dd>
    </dl>
    </div>
    </div>
    </div>
    <div id="earth" class="orbit">
    <div class="pos">
    <div class="orbit">
    <div class="pos">
    <div class="moon"></div>
    </div>
    </div>
    <div class="planet">
    <dl class="infos">
    <dt>Earth</dt>
    <dd><span></span></dd>
    </dl>
    </div>
    </div>
    </div>
    <div id="mars" class="orbit">
    <div class="pos">
    <div class="planet">
    <dl class="infos">
    <dt>Mars</dt>
    <dd><span></span></dd>
    </dl>
    </div>
    </div>
    </div>
    <div id="jupiter" class="orbit">
    <div class="pos">
    <div class="planet">
    <dl class="infos">
    <dt>Jupiter</dt>
    <dd><span></span></dd>
    </dl>
    </div>
    </div>
    </div>
    <div id="saturn" class="orbit">
    <div class="pos">
    <div class="planet">
    <div class="ring"></div>
    <dl class="infos">
    <dt>Saturn</dt>
    <dd><span></span></dd>
    </dl>
    </div>
    </div>
    </div>
    <div id="uranus" class="orbit">
    <div class="pos">
    <div class="planet">
    <dl class="infos">
    <dt>Uranus</dt>
    <dd><span></span></dd>
    </dl>
    </div>
    </div>
    </div>
    <div id="neptune" class="orbit">
    <div class="pos">
    <div class="planet">
    <dl class="infos">
    <dt>Neptune</dt>
    <dd><span></span></dd>
    </dl>
    </div>
    </div>
    </div>
    <div id="sun">
    <dl class="infos">
    <dt>Sun</dt>
    <dd><span></span></dd>
    </dl>
    </div>
    </div>
    </div>
    </div>
    </body>
    55 changes: 55 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    $(window).load(function(){

    var body = $("body"),
    universe = $("#universe"),
    solarsys = $("#solar-system");

    var init = function() {
    body.removeClass('view-2D opening').addClass("view-3D").delay(4000)
    .queue(function() {
    $(this).removeClass('hide-UI').addClass("set-speed");
    $(this).dequeue();
    });
    };

    var setView = function(view) {
    universe.removeClass().addClass(view);
    };

    $(".nav a").click(function(e) {
    $(this).parent().find('a').removeClass('active');
    $(this).addClass('active');
    e.preventDefault();
    });

    $(".set-view").click(function(e) {
    body.toggleClass("view-3D view-2D");
    e.preventDefault();
    });

    $(".set-zoom").click(function(e) {
    body.toggleClass("zoom-large zoom-close");
    e.preventDefault();
    });

    $("#set-speed").click(function() {
    setView("scale-stretched set-speed");
    });

    $("#set-size").click(function() {
    setView("scale-s set-size");
    });

    $("#set-distance").click(function() {
    setView("scale-d set-distance");
    });

    $(".sub.nav a").click(function(e) {
    var ref = $(this).attr("class");
    solarsys.removeClass().addClass(ref);
    e.preventDefault();
    });

    init();

    });
    1,393 changes: 1,393 additions & 0 deletions style.css
    View file
    1,393 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.