Skip to content

Commit 387dad7

Browse files
author
daniel-lundin
committed
Polished period table demo
1 parent 8b8db6e commit 387dad7

File tree

2 files changed

+102
-73
lines changed

2 files changed

+102
-73
lines changed

‎periodic.html

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
45
<style>
56

67
body {
78
background: #111;
9+
margin: 0;
10+
overflow: hidden;
811
}
912

1013
.container {
1114
position: relative;
12-
width: 800px;
13-
height: 600px;
15+
width: 100%;
16+
height: 90vh;
1417
margin: 0 auto;
1518
transform-style: preserve-3d;
19+
cursor: move;
20+
/*overflow: hidden;*/
1621
/*perspective: 800px;*/
1722
}
1823

1924
.root {
2025
position: relative;
21-
width: 800px;
22-
height: 600px;
26+
width: 100%;
27+
height: 90vh;
2328
margin: 0 auto;
2429
transform-style: preserve-3d;
2530
/*perspective: 500px;*/
@@ -51,13 +56,32 @@
5156
font-size: 6px;
5257
}
5358

59+
.controls {
60+
text-align: center;
61+
height: 10vh;
62+
}
63+
.controls__button {
64+
border: 0;
65+
padding: 10px 30px;
66+
margin: 0 10px;
67+
background: rgba(30, 117, 123, 0.34);
68+
color: white;
69+
font-size: 20px;
70+
}
71+
5472
</style>
5573
</head>
5674
<body>
75+
<div class="controls">
76+
<button id="table" class="controls__button">Table</button>
77+
<button id="grid" class="controls__button">Grid</button>
78+
<button id="spiral" class="controls__button">Spiral</button>
79+
</div>
5780
<div class="container">
5881
<div class="root">
5982
</div>
6083
</div>
84+
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
6185
<script src="snabbt.js"></script>
6286
<script src="periodic.js"></script>
6387
</body>

‎periodic.js

Lines changed: 74 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use strict';
2-
/* global snabbt, window, document */
2+
/* global snabbt, Hammer, window, document */
33

44
var chemicalElements = [
55
{ symbol: 'H', name: 'Hydrogen', group: 1, period: 1 },
@@ -122,16 +122,7 @@ var chemicalElements = [
122122
{ symbol: 'Uuo', name: 'Ununoctium', group: 18, period: 7 }
123123
];
124124

125-
var currentFormation = 0;
126125
var domElements = [];
127-
var formations = [
128-
tableFormation,
129-
gridFormation,
130-
spiralFormation
131-
];
132-
133-
var cameraPositions = [
134-
];
135126
var springConstant = 0.5;
136127
var springDeceleration = 0.7;
137128

@@ -210,13 +201,15 @@ function gridFormation() {
210201

211202
function spiralFormation() {
212203
var rots = 5;
204+
var yStep = 3;
205+
var baseYOffset = domElements.length / 2 * yStep;
213206

214207
snabbt(domElements, {
215208
position: function(i, len) {
216209
var x = Math.sin(rots * 2 * Math.PI * i / len);
217210
var z = Math.cos(rots * 2 * Math.PI * i / len);
218211
var radius = 300;
219-
return [radius * x, i * 3, radius * z];
212+
return [radius * x, -baseYOffset + i * yStep, radius * z];
220213
},
221214
rotation: function(i, len) {
222215
var rotation = -(i / len) * rots * Math.PI * 2;
@@ -231,75 +224,87 @@ function spiralFormation() {
231224
});
232225
}
233226

234-
function rootAnimation() {
235-
var root = document.querySelector('.root');
236-
var constant = 0.2;
237-
var perspective = 1000;
238-
snabbt(root, {
239-
rotation: [0, Math.PI / 4, 0],
240-
perspective: perspective,
241-
easing: 'spring',
242-
springConstant: constant,
243-
springDeceleration: springDeceleration
244-
}).snabbt({
245-
rotation: [-Math.PI / 4, 0, 0],
246-
perspective: perspective,
247-
easing: 'spring',
248-
springConstant: constant,
249-
springDeceleration: springDeceleration,
250-
}).snabbt({
251-
rotation: [0, -Math.PI / 4, 0],
252-
perspective: perspective,
253-
easing: 'spring',
254-
springConstant: constant,
255-
springDeceleration: springDeceleration,
256-
}).snabbt({
257-
rotation: [Math.PI / 4, 0, 0],
258-
perspective: perspective,
259-
easing: 'spring',
260-
springConstant: constant,
261-
springDeceleration: springDeceleration,
262-
complete: rootAnimation
263-
});
264-
}
227+
function setupCameraControls(container, root) {
228+
var hammertime = new Hammer(container, { direction: Hammer.DIRECTION_ALL });
229+
var translateZ = 0;
230+
var rotateX = 0;
231+
var rotateY = 0;
232+
var rotateXOffset = 0;
233+
var rotateYOffset = 0;
234+
var rotateXVelocity = 0;
235+
var rotateYVelocity = 0;
265236

266-
function cameraOne() {
267-
var root = document.querySelector('.root');
268-
snabbt(root, {
269-
rotation: [Math.PI / 2, 0, 0],
270-
position: [200, 200, 0],
271-
duration: 3000,
272-
perspective: 1000,
273-
easing: 'spring',
274-
springConstant: springConstant,
275-
springDeceleration: springDeceleration
237+
root.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg)';
238+
function updateCamera(rotX, rotY, transZ) {
239+
root.style.transform = 'perspective(1000px) translateZ(' + transZ + 'px) rotateY(' + rotX + 'deg) rotateX(' + rotY + 'deg)';
240+
}
276241

277-
});
278-
}
242+
function stepCamera() {
243+
rotateX += rotateXVelocity;
244+
rotateY += rotateYVelocity;
245+
var rotX = rotateX + rotateXOffset;
246+
var rotY = rotateY + rotateYOffset;
279247

280-
function cameraTwo() {
281-
var root = document.querySelector('.root');
282-
snabbt(root, {
283-
rotation: [0, 0, 0],
284-
position: [0, 0, 1000],
285-
duration: 3000,
286-
perspective: 1000,
287-
});
288-
}
289248

290-
function switchFormation() {
291-
currentFormation = (currentFormation + 1) % formations.length;
292-
formations[currentFormation]();
249+
rotateXVelocity *= 0.99;
250+
rotateYVelocity *= 0.99;
251+
updateCamera(rotX, rotY, translateZ);
252+
253+
window.requestAnimationFrame(stepCamera);
254+
}
255+
window.requestAnimationFrame(stepCamera);
256+
257+
hammertime.on('pan', function(ev) {
258+
259+
rotateXOffset = ev.deltaX / 10;
260+
rotateYOffset = ev.deltaY / 10;
261+
rotateXVelocity = 0;
262+
rotateYVelocity = 0;
263+
if (ev.isFinal) {
264+
rotateX += rotateXOffset;
265+
rotateY += rotateYOffset;
266+
rotateXVelocity = -ev.velocityX;
267+
rotateYVelocity = -ev.velocityY;
268+
rotateXOffset = 0;
269+
rotateYOffset = 0;
270+
}
271+
updateCamera();
272+
});
273+
container.addEventListener('mousewheel', function(ev) {
274+
translateZ += ev.deltaY;
275+
translateZ = Math.min(Math.max(0, translateZ), 600);
276+
updateCamera();
277+
});
293278
}
294279

295280
function initEventListeners() {
281+
var root = document.querySelector('.root');
296282
var container = document.querySelector('.container');
297-
container.addEventListener('click', function() {
298-
switchFormation();
283+
var tableButton = document.getElementById('table');
284+
var gridButton = document.getElementById('grid');
285+
var spiralButton = document.getElementById('spiral');
286+
287+
window.addEventListener('scroll', function(evt) {
288+
console.log('scroll');
289+
evt.preventDefault();
290+
evt.stopPropagation();
291+
return false;
292+
});
293+
294+
tableButton.addEventListener('click', function() {
295+
tableFormation();
296+
});
297+
gridButton.addEventListener('click', function() {
298+
gridFormation();
299299
});
300+
spiralButton.addEventListener('click', function() {
301+
spiralFormation();
302+
});
303+
304+
setupCameraControls(container, root);
300305
}
301306

302307
createElements();
303308
tableFormation();
304-
rootAnimation();
309+
//rootAnimation();
305310
initEventListeners();

0 commit comments

Comments
 (0)