-
Notifications
You must be signed in to change notification settings - Fork 1
/
rainbow.html
93 lines (73 loc) · 1.83 KB
/
rainbow.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
92
93
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>rainbow</title>
<style>
body { margin: 0; }
html, body {
height: 100%;
overflow: hidden;
}
.ring {
position: absolute;
margin: 0 auto;
background: hsla( 0, 100%, 50%, 0.2 );
}
</style>
</head>
<body>
<script>
function Rainbow( ringCount ) {
ringCount = ringCount || 10;
// measure how big bows will be
var w = window.innerWidth / 2;
var h = window.innerHeight;
var ringSize = Math.sqrt( w * w + h * h ) / ringCount * 2;
// create rings
this.rings = [];
var ring;
var frag = document.createDocumentFragment();
for ( var i=0; i < ringCount; i++ ) {
ring = new Ring( i, ringSize );
frag.appendChild( ring.element );
this.rings.push( ring );
}
document.body.appendChild( frag );
// timer increments every frame
this.timer = 0;
// start animation
this.sparkleShine();
}
Rainbow.prototype.sparkleShine = function() {
this.timer++;
var ring, hue;
for ( var i=0, len = this.rings.length; i < len; i++ ) {
ring = this.rings[i];
var hue = ( ring.index * 20 ) + this.timer * -2;
ring.element.style.background = 'hsl(' + hue + ', 100%, 50% )';
}
var _this = this;
setTimeout( function() {
_this.sparkleShine();
}, 17 );
};
function Ring( index, ringSize ) {
this.index = index;
this.element = document.createElement('div');
this.element.className = 'ring';
var size = ( index + 1 ) * ringSize;
var elemStyle = this.element.style;
elemStyle.width = this.element.style.height = size + 'px';
elemStyle.left = ( window.innerWidth - size ) / 2 + 'px';
elemStyle.bottom = -( size / 2 ) + 'px';
elemStyle.borderRadius = size / 2 + 'px';
elemStyle.zIndex = 100 - index;
}
function init() {
var myRainbow = new Rainbow();
}
window.onload = init;
</script>
</body>
</html>