Download raw (2.4 KB)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Scroll Abberations</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { display: flex; flex-direction: row; flex-wrap: wrap; } .abberation { position: relative; flex: 1 0 30%; margin: 20px; } .abberation img { max-width: 100%; } .abberation img:first-child { position: absolute; } .abberation:nth-child(n+4) img { max-width: 50%; } .abberation:nth-child(n+7) img { max-width: 20%; } </style> </head> <body> <section class="abberation"> <img src="autotrace.svg"> <img src="potrace.svg"> </section> <section class="abberation"> <img src="potrace.svg"> <img src="potrace.svg"> </section> <section class="abberation"> <img src="autotrace.svg"> <img src="autotrace.svg"> </section> <section class="abberation"> <img src="autotrace.svg"> <img src="potrace.svg"> </section> <section class="abberation"> <img src="potrace.svg"> <img src="potrace.svg"> </section> <section class="abberation"> <img src="autotrace.svg"> <img src="autotrace.svg"> </section> <section class="abberation"> <img src="autotrace.svg"> <img src="potrace.svg"> </section> <section class="abberation"> <img src="potrace.svg"> <img src="potrace.svg"> </section> <section class="abberation"> <img src="autotrace.svg"> <img src="autotrace.svg"> </section> <script> document.addEventListener('wheel', function (e) { var max = 2, speed = 0.1; document.querySelectorAll('.abberation img:first-child').forEach(function (img) { var rotation = ('rotation' in img.dataset) ? parseFloat(img.dataset.rotation) : 0; var direction = ('direction' in img.dataset) ? parseInt(img.dataset.direction) : 1; var delta = (Math.random() * speed) * direction; rotation = Math.max(-max, Math.min(rotation + delta, max)); if (rotation === max) { direction = -1; } else if (rotation === -max) { direction = 1; } img.style.transform = 'rotate('+rotation.toString(10)+'deg)'; img.dataset.rotation = rotation; img.dataset.direction = direction; }); }); </script> </body> </html>