"3D Solar System"
Bootstrap 4.1.1 Snippet by Quarec

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
Copyright (c) 2012 Julian Garnier
Licensed under the MIT license
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
margin: 0;
padding: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after, q:before, q:after {
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
$(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();
});
};
var setView = function (view) {
universe.removeClass().addClass(view);
};
$("#toggle-data").click(function (e) {
body.toggleClass("data-open data-close");
e.preventDefault();
});
$("#toggle-controls").click(function (e) {
body.toggleClass("controls-open controls-close");
e.preventDefault();
});
$("#data a").click(function (e) {
var ref = $(this).attr("class");
solarsys.removeClass().addClass(ref);
$(this).parent().find("a").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System

Questions / Comments: