Servage Magazine

This is a little teaser on what can be achieve with web technologies and a little spare time on your hosting account! It’s amazing what you can do with the new HTML5 canvas combined with CSS and other effects. This example shows a 3D illustration of the solar system based purely on regular web technologies, HTML, CSS and JavaScript.

HTML document

The solar system is structured like a regular, logical HTML document, where elements have containers, sub-elements etc.

<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>
      ...

Then there’s a whole lot of CSS to make it look good…

JavaScript with jQuery

The JavaScript makes the whole thing move around, adds effects and controls to the illustration, making it in interactive illustration of the solar system, where you can change modes etc. Using jQuery it is very easy to program advanced functionality and gets you going quickly :-)

$(window).load(function(){

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

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

Get started – learn to create this yourself today

• HTML
• CSS
• JavaScript

Good luck and happy coding! :-)