-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhexaprism.html
91 lines (89 loc) · 4.97 KB
/
hexaprism.html
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
<html>
<head>
<meta charset="utf-8">
<title>HexaPrism</title>
<link rel="stylesheet" type="text/css" href="hexaprism.css">
<script src="hexaprism.js"></script>
</head>
<body>
<div class="container">
<div class="threed">
<div class="threed-toggler">
<input type="checkbox" id="threed-toggle"></input>
<label for="threed-toggle">3D Toggle</label>
</div>
<div class="threed-xrotation">
<input type="range" orient="vertical" id="xrotation" min="0" max="90" value ="0"/>
<label for="xrotation">(x)rotation: <span id="xrot">0</span> deg</label>
</div>
</div>
<div class="controls">
<span id="animate-left"><img src="./images/arrow-prev.png"></span>
<span id="animate-right"><img src="./images/arrow-next.png"></span>
</div>
<div class="hexaprism" data-grid="3x3" items="4" data-animation="columns|rows|shuffle">
<div class="item" data-src="./images/hexaprism.jpg">
</div>
<div class="item" data-src="./images/hexaprism2.jpg">
</div>
<div class="item" data-src="./images/hexaprism3.jpg">
</div>
<div class="item" data-src="./images/hexaprism4.jpg">
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function(){
translationComplete = true
var transitionCompleted = function(){
translationComplete = true;
}
// prevent multiple click when transition
for(var i = 0; i < document.querySelectorAll(".hexaprism section").length; i++)
{
document.querySelectorAll(".hexaprism section")[i].querySelector("div").addEventListener("transitionend", transitionCompleted, true);
document.querySelectorAll(".hexaprism section")[i].querySelector("div").addEventListener("webkitTransitionEnd", transitionCompleted, true);
document.querySelectorAll(".hexaprism section")[i].querySelector("div").addEventListener("oTransitionEnd", transitionCompleted, true);
document.querySelectorAll(".hexaprism section")[i].querySelector("div").addEventListener("MSTransitionEnd", transitionCompleted, true);
}
var itemsNumber = parseInt(document.querySelector('.hexaprism').getAttribute('items'), 10);
var initalAngle = - (360 / itemsNumber);
var angle = 0;
var xRotation = 0;
document.getElementById('animate-left').addEventListener('click', function() {
if(translationComplete === true)
{
translationComplete = false;
angle -= initalAngle;
var allElements = Array.prototype.slice.call(document.querySelectorAll('.piece'));
for ( let i = 0; i < allElements.length; i++ ) {
allElements[i].style.transform = allElements[i].style.transform.replace(/rotateY\([-\w]*\)/, '');
allElements[i].style.transform = allElements[i].style.transform + ' rotateY('+ angle +'deg)';
}
}
}, true);
document.getElementById('animate-right').addEventListener('click', function() {
if(translationComplete === true)
{
translationComplete = false;
angle += initalAngle;
var allElements = Array.prototype.slice.call(document.querySelectorAll('.piece'));
for ( let i = 0; i < allElements.length; i++ ) {
allElements[i].style.transform = allElements[i].style.transform.replace(/rotateY\([-\w]*\)/, '');
allElements[i].style.transform = allElements[i].style.transform + ' rotateY('+ angle +'deg)';
}
}
}, true);
document.getElementById('threed-toggle').addEventListener('click', function() {
let myPrism = document.querySelector('.hexaprism');
myPrism.classList.toggle('threeD');
}, true);
document.getElementById('xrotation').addEventListener('input', function() {
let myPrism = document.querySelector('.hexaprism');
myPrism.style.setProperty('--xRotation', this.value);
document.getElementById('xrot').textContent = this.value;
}, true);
}, true);
</script>
</body>
</html>