Skip to content

Commit 60ef480

Browse files
author
daniel-lundin
committed
Added periodic demo to docs
1 parent dd73555 commit 60ef480

File tree

4 files changed

+56
-42
lines changed

4 files changed

+56
-42
lines changed

‎docs/cards.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ var Deck = (function() {
8585
length: function() {
8686
return cards.length;
8787
}
88-
}
88+
};
8989
})();
9090

9191
function build_formation(positions) {

‎docs/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,7 @@ <h2>Demos</h2>
113113
<ul>
114114
<li><a href="cards.html">Cards</a></li>
115115
<li><a href="sticks.html">Crazy sticks</a></li>
116+
<li><a href="periodic.html">Periodic table</a></li>
116117
<li><a href="words.html">Laser words</a></li>
117118
</ul>
118119
</section>

‎periodic.html renamed to ‎docs/periodic.html

Lines changed: 38 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,33 @@
22
<html>
33
<head>
44
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
6+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.1/skeleton.min.css">
57
<style>
68

79
body {
810
background: #111;
911
margin: 0;
1012
overflow: hidden;
13+
font-family: 'Raleway', Arial, sans-serif;
14+
}
15+
16+
.periodic {
17+
overflow: hidden;
18+
}
19+
20+
.info {
21+
position: fixed;
22+
bottom: 0;
23+
left: 0;
24+
right: 0;
25+
text-align: center;
26+
font-family: 'Raleway', Arial, sans-serif;
27+
color: white;
28+
}
29+
30+
.info a {
31+
color: #1eaedb;
1132
}
1233

1334
.container {
@@ -36,7 +57,6 @@
3657
margin-left: -25px;
3758
margin-top: -25px;
3859
background: rgba(30, 117, 123, 0.34);
39-
font-family: sans-serif;
4060
left: 50%;
4161
top: 50%;
4262
text-align: center;
@@ -62,40 +82,32 @@
6282
transform: translateZ(10000px);
6383
z-index: 1;
6484
}
85+
6586
.controls__button {
66-
border: 0;
67-
padding: 1vh 3vh;
68-
background: rgb(30, 37, 30);
69-
color: white;
70-
font-size: 3vh;
71-
line-height: 4vh;
7287
margin: 3vh 1vh;
73-
cursor: pointer;
74-
}
75-
76-
.controls__button--selected {
77-
background: rgb(30, 117, 123);
78-
}
79-
80-
.controls__button:focus {
81-
outline: none;
88+
color: white;
8289
}
8390

8491
</style>
8592
</head>
8693
<body>
87-
<div class="controls">
88-
<button id="table" class="controls__button controls__button--selected">Table</button>
89-
<button id="grid" class="controls__button">Grid</button>
90-
<button id="spiral" class="controls__button">Spiral</button>
91-
</div>
92-
<div class="container">
93-
<div class="root">
94+
<div class="periodic">
95+
<div class="controls">
96+
<button id="table" class="controls__button button-primary">Table</button>
97+
<button id="grid" class="controls__button">Grid</button>
98+
<button id="spiral" class="controls__button">Spiral</button>
99+
</div>
100+
<div class="container">
101+
<div class="root">
102+
</div>
94103
</div>
95104
</div>
96-
<div id="log"></div>
97-
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
98-
<script src="bundle.js"></script>
105+
<div class="info">
106+
<p>DOM elements animated with <a href="index.html">snabbt.js</a>.</p>
107+
</div>
108+
109+
<script src="//hammerjs.github.io/dist/hammer.min.js"></script>
110+
<script src="../snabbt.min.js"></script>
99111
<script src="periodic.js"></script>
100112
</body>
101113
</html>

‎periodic.js renamed to ‎docs/periodic.js

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,9 @@ var chemicalElements = [
123123
];
124124

125125
chemicalElements.sort(function(a, b) {
126-
if (a.period === b.period)
127-
return a.group - b.group;
128-
return a.period - b.period;
126+
if (a.period === b.period)
127+
return a.group - b.group;
128+
return a.period - b.period;
129129
});
130130

131131
var domElements = [];
@@ -234,12 +234,14 @@ function setupCameraControls(container, root) {
234234
var rotateYOffset = 0;
235235
var rotateXVelocity = 0;
236236
var rotateYVelocity = 0;
237+
var staticTranslateZ = window.innerWidth < 480 ? 800 : 0;
237238

238239
root.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
239240
root.style.webkitTransform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
240241
function updateCamera(rotX, rotY, transZ) {
241-
root.style.transform = 'perspective(1000px) translateZ(' + transZ + 'px) rotateY(' + rotX + 'deg) rotateX(' + -rotY + 'deg)';
242-
root.style.webkitTransform = 'perspective(1000px) translateZ(' + transZ + 'px) rotateY(' + rotX + 'deg) rotateX(' + -rotY + 'deg)';
242+
var transformString = 'perspective(1000px) translateZ(' + (transZ - staticTranslateZ) + 'px) rotateY(' + rotX + 'deg) rotateX(' + -rotY + 'deg)';
243+
root.style.transform = transformString;
244+
root.style.webkitTransform = transformString;
243245
}
244246

245247
function stepCamera() {
@@ -292,21 +294,21 @@ function initEventListeners() {
292294

293295
tableButton.addEventListener('click', function() {
294296
tableFormation();
295-
tableButton.classList.add('controls__button--selected');
296-
gridButton.classList.remove('controls__button--selected');
297-
spiralButton.classList.remove('controls__button--selected');
297+
tableButton.classList.add('button-primary');
298+
gridButton.classList.remove('button-primary');
299+
spiralButton.classList.remove('button-primary');
298300
});
299301
gridButton.addEventListener('click', function() {
300302
gridFormation();
301-
tableButton.classList.remove('controls__button--selected');
302-
gridButton.classList.add('controls__button--selected');
303-
spiralButton.classList.remove('controls__button--selected');
303+
tableButton.classList.remove('button-primary');
304+
gridButton.classList.add('button-primary');
305+
spiralButton.classList.remove('button-primary');
304306
});
305307
spiralButton.addEventListener('click', function() {
306308
spiralFormation();
307-
tableButton.classList.remove('controls__button--selected');
308-
gridButton.classList.remove('controls__button--selected');
309-
spiralButton.classList.add('controls__button--selected');
309+
tableButton.classList.remove('button-primary');
310+
gridButton.classList.remove('button-primary');
311+
spiralButton.classList.add('button-primary');
310312
});
311313

312314
setupCameraControls(container, root);
@@ -341,5 +343,4 @@ function initPositions() {
341343

342344
createElements();
343345
initPositions();
344-
//tableFormation();
345346
initEventListeners();

0 commit comments

Comments
 (0)