-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
83 lines (74 loc) · 2.34 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Uprock</title>
</head>
<body>
<script>
(function(){
//высота экрана
var clientHeight = document.documentElement.clientHeight;
// делаем див и прикрепляем его
var div = document.createElement("div");
div.style.position="relative";
div.style.height = div.style.width = clientHeight/10 +'px';
div.style.transform = div.style.WebkitTransform = div.style.MsTransform = "rotate(45deg)";
div.style.marginLeft = 'auto';
div.style.marginRight = 'auto';
div.style.marginTop = clientHeight/10 + 'px';
document.body.appendChild(div);
// рандомный цвет при создании
var color = Math.ceil(Math.random()*360);
div.style.backgroundColor = "hsl("+color+",100%,50%)";
var top = 0;
var scrollRate = clientHeight/80;
var stop = (clientHeight*0.7);
if(document.addEventListener){
if('onwheel' in document){
document.addEventListener("wheel",upRock)
}else if('onmousewheel' in document){
document.addEventListener("mousewheel", upRock)
}else{
document.addEventListener("MozMousePixelScroll", upRock);
}
}else{
document.attachEvent("onmousewheel", upRock);
}
var touch;
var upOrDown;
document.addEventListener('touchstart', function(e){
touch = e.touches[0].screenY;
});
document.addEventListener('touchmove', function(e){
var move = e.touches[0].screenY- touch;
if (move > 0){
upOrDown = -1;
} else {
upOrDown = 1;
}
upRock();
});
//изменения при скроле
function upRock(e){
e = e || window.event;
var delta = e.deltaY|| e.detail || e.wheelDelta ||e.wheelDelta || upOrDown;
if (top*scrollRate < stop && delta>0){
div.style.top = (top++)*scrollRate + 'px';
div.style.borderRadius = top*scrollRate/clientHeight*72 + '%';
color = Math.ceil(color*0.99);
div.style.backgroundColor = "hsl("+color+",100%,50%)";
}
if (delta <0 && top*scrollRate> top){
div.style.top = (top--)*scrollRate + 'px';
div.style.borderRadius = top*scrollRate/clientHeight*72 + '%';
color = Math.ceil(color*1.01);
div.style.backgroundColor = "hsl("+color+",100%,50%)";
}
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
}
})();
</script>
</body>
</html>