OLD | NEW |
(Empty) | |
| 1 |
| 2 <script id='compositor_worker' type='text/compositor-worker'> |
| 3 (function(scope) { |
| 4 |
| 5 scope.onmessage = function(event) { |
| 6 var message = event.data; |
| 7 var main = message['main']; |
| 8 var mirror = message['mirror']; |
| 9 var main_container = message['main_container']; |
| 10 var mirror_container = message['mirror_container']; |
| 11 |
| 12 function raf() { |
| 13 mirror.opacity = main.opacity; |
| 14 mirror.transform = main.transform; |
| 15 mirror.scrollLeft = main.scrollLeft; |
| 16 |
| 17 mirror_container.scrollLeft = main_container.scrollLeft; |
| 18 mirror_container.scrollTop = main_container.scrollTop; |
| 19 |
| 20 requestAnimationFrame(raf); |
| 21 } |
| 22 |
| 23 requestAnimationFrame(raf); |
| 24 }; |
| 25 |
| 26 })(self); |
| 27 </script> |
| 28 |
| 29 <style> |
| 30 |
| 31 .container { |
| 32 width: 300px; |
| 33 height: 300px; |
| 34 overflow: scroll; |
| 35 } |
| 36 |
| 37 .x { |
| 38 width: 500px; |
| 39 height: 1000px; |
| 40 } |
| 41 |
| 42 #main { |
| 43 background-color: gray; |
| 44 transition: all 5s ease; |
| 45 } |
| 46 |
| 47 #mirror { |
| 48 background-color: silver; |
| 49 } |
| 50 |
| 51 .animate-opacity { |
| 52 opacity: 0.5; |
| 53 } |
| 54 |
| 55 .animate-transform { |
| 56 transform: translateX(100px); |
| 57 } |
| 58 |
| 59 </style> |
| 60 |
| 61 <div class='container' id='main_container'> |
| 62 <div id='main' class='x'> |
| 63 <pre> |
| 64 00 |
| 65 01 |
| 66 02 |
| 67 03 |
| 68 04 |
| 69 05 |
| 70 06 |
| 71 07 |
| 72 08 |
| 73 09 |
| 74 10 |
| 75 11 |
| 76 12 |
| 77 13 |
| 78 14 |
| 79 15 |
| 80 16 |
| 81 17 |
| 82 18 |
| 83 19 |
| 84 20 |
| 85 21 |
| 86 22 |
| 87 23 |
| 88 24 |
| 89 25 |
| 90 26 |
| 91 27 |
| 92 28 |
| 93 29 |
| 94 30 |
| 95 31 |
| 96 32 |
| 97 33 |
| 98 34 |
| 99 35 |
| 100 36 |
| 101 37 |
| 102 38 |
| 103 39 |
| 104 40 |
| 105 41 |
| 106 42 |
| 107 43 |
| 108 44 |
| 109 45 |
| 110 46 |
| 111 47 |
| 112 48 |
| 113 49 |
| 114 </pre> |
| 115 </div> |
| 116 </div> |
| 117 |
| 118 <div class='container' id='mirror_container'> |
| 119 <div id='mirror' class='x'> |
| 120 </div> |
| 121 </div> |
| 122 |
| 123 <script> |
| 124 |
| 125 mirror.appendChild(main.firstElementChild.cloneNode(true)); |
| 126 |
| 127 if (('CompositorProxy' in window)) { |
| 128 var mainp = new CompositorProxy(main, ['opacity', 'transform', 'scrollLeft']); |
| 129 var mirrorp = new CompositorProxy(mirror, ['opacity', 'transform', 'scrollLeft
']); |
| 130 var main_containerp = new CompositorProxy(main_container, |
| 131 ['scrollLeft', 'scrollTop']); |
| 132 var mirror_containerp = new CompositorProxy(mirror_container, |
| 133 ['scrollLeft', 'scrollTop']); |
| 134 |
| 135 var url = window.URL.createObjectURL(new Blob([compositor_worker.textContent])
); |
| 136 |
| 137 var worker = new CompositorWorker(url); |
| 138 worker.postMessage({ |
| 139 'main' : mainp, |
| 140 'mirror' : mirrorp, |
| 141 'main_container' : main_containerp, |
| 142 'mirror_container' : mirror_containerp |
| 143 }); |
| 144 |
| 145 window.setTimeout(function() { |
| 146 main.classList.add('animate-transform'); |
| 147 main.classList.add('animate-opacity'); |
| 148 window.setTimeout(function() { |
| 149 var old = Date.now(); |
| 150 var count = 0; |
| 151 while (Date.now() - old < 3000) |
| 152 ++count; |
| 153 console.log(count); |
| 154 }, 10); |
| 155 }, 3000); |
| 156 } |
| 157 |
| 158 </script> |
OLD | NEW |