OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <meta name="viewport" content="width=device-width, user-scalable=no"> |
| 3 <container id="container"></container> |
| 4 <script> |
| 5 var N = 1000; |
| 6 var duration = 1000; |
| 7 var targets = []; |
| 8 var triggers = []; |
| 9 |
| 10 for (var i = 0; i < N; i++) { |
| 11 triggers.push(document.createElement('trigger')); |
| 12 var target = document.createElement('target'); |
| 13 container.appendChild(target); |
| 14 targets.push(target); |
| 15 } |
| 16 |
| 17 function startAllTransitions() { |
| 18 requestAnimationFrame(function() { |
| 19 targets.forEach(function(target, i) { |
| 20 container.insertBefore(triggers[i], target); |
| 21 }); |
| 22 requestAnimationFrame(function() { |
| 23 triggers.forEach(function(trigger) { |
| 24 trigger.remove(); |
| 25 }) |
| 26 }); |
| 27 }); |
| 28 } |
| 29 |
| 30 startAllTransitions(); |
| 31 setInterval(startAllTransitions, duration); |
| 32 |
| 33 requestAnimationFrame(function() { |
| 34 window.measurementReady = true; |
| 35 }); |
| 36 </script> |
| 37 |
| 38 <style> |
| 39 body { |
| 40 margin: 0; |
| 41 overflow: hidden; |
| 42 } |
| 43 container { |
| 44 display: flex; |
| 45 flex-flow: row wrap; |
| 46 width: 550px; |
| 47 height: 800px; |
| 48 background: lightgoldenrodyellow; |
| 49 } |
| 50 |
| 51 target { |
| 52 display: inline-block; |
| 53 width: 9px; height: 9px; |
| 54 background: magenta; |
| 55 transition: opacity 1000ms linear; |
| 56 opacity: 0; |
| 57 } |
| 58 trigger + target { |
| 59 transition: none; |
| 60 opacity: 1; |
| 61 } |
| 62 trigger { |
| 63 display: none; |
| 64 } |
| 65 </style> |
OLD | NEW |