-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathaprilfools.html
108 lines (101 loc) · 3.45 KB
/
aprilfools.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
<html>
<head>
<audio loop="" preload="auto" id="song" src=younevercantell.mp3 type="audio/mp3">
</audio><link href='https://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'>
<style>
#body{
background-color:black;
}
#canvas{
position:fixed;
display:block;
width:100%;
height:100%;
left:0;
top:0;
-webkit-filter:blur(10px);
-moz-filter:blur(10px);
-o-filter:blur(10px);
}
#fools,#fools2{
display:block;
position:fixed;
width:100%;
font-family:Oswald,Trebuchet MS,sans-serif;
text-align:center;
font-size:10vw;
top:50%;
color:white;
margin-top:-10vw;
}
#fools2{
margin-top: 6vw;
font-size: 1.5vw;
}
travolta,travolta2{
display:block;
position:absolute;
width:300px;
height:242px;
background-image:url(ConfusedTravoltaSprite.png);
animation: aniTravolta 2s steps(25) infinite;
animation-direction:alternate;
}
travolta{
bottom:0;
left:100px;
}
travolta2{
transform:rotate(180deg);
top:0;
right:100px;
animation-delay:300ms;
}
@keyframes aniTravolta{
0%{background-position: 0 0;}
50%{background-position: -7500px 0;}
50.0001%{background-position: 0 -242px;}
100%{background-position: -7500px -242px;}
}
</style>
<script>
var spotPos=[],spotVel=[],spotSize=[],spotCols=[];
var spotNo=100;
for (i=0;i<spotNo;i++){
spotPos.push(Math.random()*window.innerWidth,Math.random()*window.innerHeight);
spotVel.push(Math.random()*6-3,Math.random()*6-3);
spotSize.push(Math.random()*70+30);
spotCols.push(Math.floor(Math.random()*155+100),Math.floor(Math.random()*155+100),Math.floor(Math.random()*155+100));
}
document.getElementById("song").play();
function moveSpots(){
document.getElementById("canvas").width=window.innerWidth;
document.getElementById("canvas").height=window.innerHeight;
var ctx = document.getElementById("canvas").getContext("2d");
ctx.clearRect(0,0,window.innerWidth,window.innerHeight);
for (i=0;i<spotNo;i++){
ctx.fillStyle="rgba("+spotCols[i*3]+","+spotCols[i*3+1]+","+spotCols[i*3+2]+",0.5)";
ctx.beginPath();
ctx.arc(spotPos[i*2],spotPos[i*2+1],spotSize[i],0,2*Math.PI);
ctx.fill();
spotPos[i*2]+=spotVel[i*2];
spotPos[i*2+1]+=spotVel[i*2+1];
if (spotPos[i*2]>window.innerWidth+spotSize[i]){spotPos[i*2]=-spotSize[i];}
if (spotPos[i*2]<-spotSize[i]){spotPos[i*2]=window.innerWidth+spotSize[i];}
if (spotPos[i*2+1]>window.innerHeight+spotSize[i]){spotPos[i*2+1]=-spotSize[i];}
if (spotPos[i*2+1]<-spotSize[i]){spotPos[i*2+1]=window.innerHeight+spotSize[i];}
}
}
setInterval(moveSpots,25);
</script>
</head>
<body id="body">
<travolta id="travolta"></travolta>
<travolta2 id="travolta"></travolta2>
<canvas id="canvas" width="100" height="100"></canvas>
<div id="fools">APRIL FOOLS!</div>
<a href="https://af.reddit.com/r/ConfusedTravolta">
<div id="fools2">We're just kidding. Click here for the unaltered /r/ConfusedTravolta page!</div>
</a>
</body>
</html>