OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <!-- saved from url=(0048)http://fiddle.jshell.net/bt8dhkrn/26/show/light/ --> | |
3 <!-- here we have two divs that jitter --> | |
4 | |
5 <style type="text/css"> | |
6 #jitter1 { | |
7 width: 100px; | |
8 height: 100px; | |
9 background: papayawhip; | |
10 border: 1px solid black; | |
11 will-change: transform; | |
12 } | |
13 | |
14 #jitter2 { | |
15 width: 100px; | |
16 height: 100px; | |
17 background: red; | |
18 border: 1px solid black; | |
19 will-change: transform; | |
20 } | |
21 | |
22 body { | |
23 height: 2500px; | |
24 } | |
25 </style> | |
26 | |
27 <script> | |
28 window.onload=function(){ | |
29 tick = function(timestamp) { | |
30 document.getElementById("jitter1").style.transform = "translate(0px, " + doc
ument.body.scrollTop + "px)"; | |
31 document.getElementById("jitter2").style.transform = "translate(0px, " + doc
ument.body.scrollTop + "px)"; | |
32 window.requestAnimationFrame(tick); | |
33 } | |
34 window.requestAnimationFrame(tick); | |
35 | |
36 jank = function(timestamp) { | |
37 for (var i = 0; i < 10; ++i) { | |
38 Date.now(); | |
39 } | |
40 window.setTimeout(jank, 50); | |
41 } | |
42 window.setTimeout(jank, 50); | |
43 } | |
44 </script> | |
45 | |
46 <div id="jitter1" style="transform: translate(0px, 318px);"></div> | |
47 <div id="jitter2" style="transform: translate(0px, 318px);"></div> | |
48 </html> | |
OLD | NEW |