OLD | NEW |
| (Empty) |
1 <html> | |
2 <head> | |
3 <title>Compositing - Huge <div></title> | |
4 </head> | |
5 <body> | |
6 <div id="big" style="-webkit-transform: translateZ(0);"> | |
7 <div style="left: 0px; top: 0px; width: 100px; height: 100px; position: absol
ute; background-color: green;"></div> | |
8 <div style="left: 3000000px; top: 1000000px; width: 100px; height: 100px; pos
ition: absolute; background-color: red;" id="bottomRight"></div> | |
9 </div> | |
10 <script> | |
11 window.onload = init; | |
12 | |
13 var raf; | |
14 | |
15 function init() { | |
16 raf = window.requestAnimationFrame || | |
17 window.webkitRequestAnimationFrame || | |
18 window.mozRequestAnimationFrame || | |
19 window.oRequestAnimationFrame || | |
20 window.msRequestAnimationFrame; | |
21 tick(); | |
22 }; | |
23 | |
24 function tick() { | |
25 update(); | |
26 raf(tick); | |
27 }; | |
28 var bottomRight = document.getElementById('bottomRight'); | |
29 var x = 3000000; | |
30 var y = 1000000; | |
31 | |
32 function rand255() { | |
33 return Math.floor(Math.random() * 256); | |
34 } | |
35 | |
36 function update() { | |
37 y += 1000000; | |
38 bottomRight.style.left = x + 'px'; | |
39 bottomRight.style.top = y + 'px'; | |
40 bottomRight.style.backgroundColor = "rgb(" + rand255() + ", " + rand255() + ",
" + rand255() + ")"; | |
41 scrollTo(x, y); | |
42 }; | |
43 | |
44 </script> | |
45 </body> | |
46 </html> | |
OLD | NEW |