blob: 5d0b06b2c142fd3c601fd3570716b95a65d4302c (
plain)
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
|
var tethers = [];
document.addEventListener('DOMContentLoaded', function(){
dragging = null;
document.body.addEventListener('mouseup', function(){
dragging = null;
});
document.body.addEventListener('mousemove', function(e){
if (dragging){
dragging.style.top = e.clientY + 'px';
dragging.style.left = e.clientX + 'px';
Tether.position()
}
});
document.body.addEventListener('mousedown', function(e){
if (e.target.getAttribute('data-index'))
dragging = e.target;
})
var count = 60;
var parent = null;
var dir = 'left';
var first = null;
while (count--){
var el = document.createElement('div');
el.setAttribute('data-index', count);
document.querySelector('.scroll').appendChild(el);
if (!first)
first = el;
if (count % 10 === 0)
dir = dir == 'right' ? 'left' : 'right';
if (parent){
tethers.push(new Tether({
element: el,
target: parent,
attachment: 'middle ' + dir,
targetOffset: (dir == 'left' ? '10px 10px' : '10px -10px')
}));
}
parent = el;
}
initAnim(first);
});
function initAnim(el){
var start = performance.now()
var last = 0;
var lastTop = 0;
var tick = function(){
var diff = performance.now() - last;
if (!last || diff > 50){
last = performance.now();
var nextTop = 50 * Math.sin((last - start) / 1000);
var curTop = parseFloat(el.style.top || 0);
var topChange = nextTop - lastTop;
lastTop = nextTop;
var top = curTop + topChange;
el.style.top = top + 'px';
Tether.position();
}
requestAnimationFrame(tick);
};
tick();
}
|
