Skip to content
Snippets Groups Projects
Commit 8124da8e authored by pierreh's avatar pierreh
Browse files

Upload New File 50 times slower

parent fcaa72f6
Branches archive
No related tags found
Hide whitespace changes
Inline Side-by-side
engraving/scroll-abberations/index.swirl-superslow.html 0 → 100644
+ 73
− 0
View file @ 8124da8e
<!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>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment