| 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 |