By: Prem Tiwari | Last Updated: | In: Javascript & Ajax, PHP Tutorial, Web Technologies
Hi friend, hope you are doing well. Today i am going to share a interesting article which demonstrate the solar system data visualization using using HTML/CSS and a little bit of JavaScript code. This script is free of charge to use any person for his personal and professional use.
This article is written in HTML/CSS and JavaScript code. you can also customize the style of this page according to your needs.
Include the bellow snippets in head section of your page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <link rel='stylesheet' id='crayon-css' href='css/style.css' type='text/css' media='all' /> <script src="js/prefixfree.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script type="text/javascript"> if (typeof jQuery == 'undefined') { document.write(unescape("%3Cscript src='js/jquery.min.js' type='text/javascript'%3E%3C/script%3E")); } </script> <script src="js/prefixfree.min.js"></script> <script src="js/scripts.min.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> |
After the head section of your page copy paste bellow code and save.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <body class="opening hide-UI view-2D zoom-large data-close controls-close"> <div id="navbar"> <a id="toggle-data" href="#data"><i class="icon-data"></i>Data</a> <h1>3D Solar System<br><span>by <a href="https://twitter.com/JulianGarnier" target="_blank">@JulianGarnier</a></span></h1> <a id="toggle-controls" href="#controls"><i class="icon-controls"></i>Controls</a> </div> <div id="data"> <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 id="controls"> <label class="set-view"> <input type="checkbox"> </label> <label class="set-zoom"> <input type="checkbox"> </label> <label> <input type="radio" class="set-speed" name="scale" checked> <span>Speed</span> </label> <label> <input type="radio" class="set-size" name="scale"> <span>Size</span> </label> <label> <input type="radio" class="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> |
After doing above all now open your html page to see the 3D Solar System in your browser window.
Note: The Author will not liable for any clam, damages and connection with this software.
Prem Tiwari is the founder of FreeWebMentor.com and also a professional developer who has vast experience in PHP and open source technologies. Apart from this, he is a blogger by hobby and also he has been a regular speaker of WordPress sessions in various IT Companies. View all posts by Prem Tiwari
