-
Notifications
You must be signed in to change notification settings - Fork 0
/
BouncyMoon.html
181 lines (175 loc) · 6.27 KB
/
BouncyMoon.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>
<head>
<style>
.moon {
width:140px;
height:140px;
border-radius:100%;
position: fixed;
margin-top: 50px;
left:700px;
background: #d9d7d1;
}
.bounce {
animation: bounce 2s;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
50% {
top: 350px;
height: 140px;
-webkit-animation-timing-function: ease-out;
}
55% {
top: 370px; height: 120px;
-webkit-animation-timing-function: ease-in;}
65% {
top: 340px; height: 140px;
-webkit-animation-timing-function: ease-out;}
100% {
top: 0;
-webkit-animation-timing-function: ease-in;
}
}
.night {
margin-left: 0;
margin-top: 0;
background: linear-gradient(to bottom, #111936, #285A7B);
height:100%; width: 100%;
}
.stars {
position: absolute;
background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 1);
}
.island {
position: fixed;
left: 575px;
top: 530px;
height: 50px;
width: 400px;
border: 1px solid;
background: green;
border-radius:50px;
}
div#hint {
background: #fff;
padding: .5em;
width:500px;
visibility: hidden;
z-index:1;
font-weight: bold;
transition: visibility 1s, opacity 0.5s linear;
}
button {
margin: 5px;
}
</style>
<script>
var hangTime = 250;
var hangInterval = 250;
var g_animating = false;
var height, width;
function init() {
var body = document.body;
var html = document.documentElement;
document.getElementById("hint").style.visibility = "hidden";
document.getElementById("hint").style.opacity = "0";
height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
width = Math.max( body.scrollWidth, body.offsetWidth,
html.clientWidth, html.scrollWidth, html.offsetWidth ) - 10;
}
function hang() {
var now = (new Date()).getTime();
for (;;) {
if((new Date()).getTime() - now > hangTime) {
break;
}
}
}
// Hang for "hangTime" after every "hangInterval"
var g_intervalHandle;
function stopHangs() {
clearInterval(g_intervalHandle);
}
function startIntermittentHangs() {
stopHangs();
g_intervalHandle = setInterval(hang, hangInterval);
}
function startBounce() {
if(!g_animating)
document.getElementById("moonid").classList.add("bounce");
};
function stopBounce() {
if(!g_animating)
document.getElementById("moonid").classList.remove("bounce");
};
function createStars() {
init();
var starsCount = 100;
for(var i=0; i < starsCount; i++) {
var iDiv = document.createElement("div");
iDiv.style.height = "10px";
iDiv.style.width = "10px";
iDiv.style.top = Math.floor(Math.random() * height) + "px";
iDiv.style.left = Math.floor(Math.random() * width) + "px";
iDiv.classList.add("stars");
document.getElementById("stars").appendChild(iDiv);
}
}
function togglehint(){
var hint = document.getElementById("hint");
if(hint.style.visibility == "hidden"){
hint.style.visibility = "visible";
hint.style.opacity = "1";
document.getElementById("howtobutton").innerHTML="Hide instructions.";
}
else{
hint.style.visibility = "hidden";
hint.style.opacity = "0";
document.getElementById("howtobutton").innerHTML="Show instructions.";
}
}
</script>
</head>
<body class="night" onload="createStars()" style="height:500vh; width: 100%; ">
<div id="stars"></div>
<div id="moonid" class="moon"><div></div><div></div><div></div></div>
<div class="island"></div>
<div style="position: fixed; margin: 5px;">
<button id="howtobutton" onclick="togglehint()">Click me for usage instructions.</button><br /><br />
<button onclick="startBounce()">Start animation.</button>
<button onclick="stopBounce()">Stop animation.</button><br />
<button onclick="startIntermittentHangs()">Induce main thread jank.</button>
<button onclick="stopHangs()">Stop jank.</button><br /><br />
<div id="hint">
<p>Note that this feature is now turned ON by default in Chromium master. So any Chrome Canary build newer than 82.0.4072.0 or Microsoft Edge build newer than 82.0.446.0 will have it ON be default. If you're on an older build, you can always manually flip the flag and try it out !</p>
<p>This is a demonstration of scrollbar performance improvements.</p>
<p>In Chromium, scrolling using the scrollbar traditionally used to happen on the main thread.
You can verify this by doing the following:
<ol>
<li>Go to about:flags.</li>
<li>Set the flag "Compositor threaded scrollbar scrolling" to "Disabled".</li>
<li>Restart the browser."</li>
<li>Click on "Start animation." (Note that this is just for visual confirmation that the main thread is hanging).</li>
<li>Click on "Induce main thread jank."</li>
<li>Click on the scrollbar thumb and drag it.</li>
</ol>
</p>
<p>Notice that the scrolling is "janky" because the main thread is intermittently hanging.</p>
<p>Next, change the flag to "Enabled" (or to "Default" if you're on a build newer than Chrome 82.0.4072.0 or newer than Edge 82.0.446.0) and repeat steps 3 through 6, you'll notice that scrolling is much smoother because it now happens on
the compositor thread.
</p>
<a href="https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/hwZCeiK4wR8/99UGx0yxCgAJ" target="_blank">Intent to implement.</a><br />
<a href="https://docs.google.com/document/d/1JqykSXnCkqwA1E3bUhhIi-IgEvM9HZdKtIu_S4Ncm6o/edit?usp=sharing" target="_blank">Design doc.</a>
</div>
</div>
</body>
</html>