-
Notifications
You must be signed in to change notification settings - Fork 26
/
Copy pathoverflow.html
115 lines (96 loc) · 3.06 KB
/
overflow.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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>特效</title>
<style>
canvas { position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<canvas id="c" width="2560" height="1285"></canvas>
<script>
var w = c.width = window.innerWidth
,h = c.height = window.innerHeight
,ctx = c.getContext( '2d' )
,opts = {
baseBaseSize: 15,
addedBaseSize: 5,
baseVel: 2,
addedVel: 1,
baseTime: 60,
addedTime: 20,
overTime: 5,
sliding: .99,
particleChance: .9,
particles: 100,
templateParticleColor: 'hsla(hue,80%,40%,alp)',
repaintAlpha: 'rgba(0,0,0,.1)',
startColor: .2,
fullColor: .5,
stopColor: .6,
timeToColorChange: 3
}
, particles = []
, tick = 0;
function Particle(){
this.reset();
}
Particle.prototype.reset = function(){
this.x = Math.pow( Math.random(), 1/4 );
this.y = h / 2;
var color = opts.templateParticleColor.replace( 'hue', this.x * 360 * 2 + tick * opts.timeToColorChange );
this.baseSize = ( Math.random() + this.x ) / 2 * ( opts.baseBaseSize + opts.addedBaseSize * Math.random() );
this.gradient = ctx.createRadialGradient( 0, 0, 0, 0, 0, this.baseSize / 2 );
this.gradient.addColorStop( opts.startColor, color.replace( 'alp', 0 ) );
this.gradient.addColorStop( opts.fullColor, color.replace( 'alp', 1 ) );
this.gradient.addColorStop( opts.stopColor, color.replace( 'alp', 1 ) );
this.gradient.addColorStop( 1, color.replace( 'alp', 0 ) );
this.vx = -( 1 + Math.random() / 10 - this.x) * ( opts.baseVel + Math.random() * opts.addedVel );
this.vy = Math.pow( this.x, 4 ) * ( opts.baseVel + Math.random() * opts.addedVel ) * ( Math.random() < .5 ? -1 : 1 );
this.x *= w / 2;
if( Math.random() < .5 ){
this.x = w - this.x;
this.vx *= -1;
}
this.time = opts.baseTime + opts.addedTime * Math.random();
this.tick = this.time + opts.overTime;
}
Particle.prototype.step = function(){
var size;
if( this.tick <= this.time ){
this.x += this.vx *= opts.sliding;
this.y += this.vy *= opts.sliding;
size = Math.pow( this.tick / this.time, 1/2 )
} else size = 1 - ( ( this.tick - this.time ) / opts.overTime ) + .000001;
--this.tick;
ctx.translate( this.x, this.y );
ctx.scale( size, size );
ctx.fillStyle = this.gradient;
ctx.fillRect( -this.baseSize / 2, -this.baseSize / 2, this.baseSize, this.baseSize );
ctx.scale( 1/size, 1/size );
ctx.translate( -this.x, -this.y );
if( this.tick <= 0 )
this.reset();
}
function anim(){
window.requestAnimationFrame( anim );
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = opts.repaintAlpha;
ctx.fillRect( 0, 0, w, h );
ctx.globalCompositeOperation = 'lighter';
++tick;
if( particles.length < opts.particles && Math.random() < opts.particleChance )
particles.push( new Particle );
particles.map( function( particle ){ particle.step(); } );
}
ctx.fillStyle = '#222';
ctx.fillRect( 0, 0, w, h );
anim();
window.addEventListener( 'resize', function(){
w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
ctx.fillStyle = '#222';
ctx.fillRect( 0, 0, w, h );
})
</script>
</body></html>