<!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; align-content: center; } .abberation { position: relative; flex: 1 0 30%; margin: 20px; text-align: center; } .abberation img { max-height: calc(100vh - 100px); } .abberation img:first-child { position: absolute; } .abberation:nth-child(2) img { max-height: 50vh; } .abberation:nth-child(3) img { max-height: 20vh; } </style> </head> <body> <section class="abberation"> <img src="autotrace-swirl.svg"> <img src="potrace-swirl.svg"> </section> <section class="abberation"> <img src="autotrace-swirl.svg"> <img src="potrace-swirl.svg"> </section> <section class="abberation"> <img src="autotrace-swirl.svg"> <img src="potrace-swirl.svg"> </section> <script> document.addEventListener('wheel', function (e) { var max = 2, min = -2; document.querySelectorAll('.abberation img:first-child').forEach(function (img) { var delta = 0; if (e.deltaY > 0) { delta = Math.random() * .02; } else if (e.deltaY < 0) { delta = -1 * Math.random() * .02; } var rot = ('rotation' in img.dataset) ? parseFloat(img.dataset.rotation) + delta : 0; if (rot > max) { rot = min; } else if (rot < min) { rot = max; } img.style.transform = 'rotate('+rot.toString(10)+'deg)'; img.dataset.rotation = rot; }); }); </script> </body> </html>