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