74 lines
1.9 KiB
HTML
74 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pixel Wipe</title>
|
|
<style>
|
|
html, body {
|
|
margin:0; padding:0; overflow:hidden; height:100%; width:100%;
|
|
}
|
|
#wipeCanvas {
|
|
position: fixed;
|
|
top:0; left:0;
|
|
width:100vw; height:100vh;
|
|
z-index:9999;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
function pixelWipe() {
|
|
// Maak canvas fullscreen
|
|
const canvas = document.createElement('canvas');
|
|
canvas.id = 'wipeCanvas';
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
document.body.appendChild(canvas);
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
// Screenshot van hele body
|
|
ctx.drawImage(document.body,0,0,canvas.width,canvas.height);
|
|
|
|
// Pixel data
|
|
let imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
|
|
let pixels = imageData.data;
|
|
|
|
// Maak array met alle pixel indices
|
|
let pixelIndices = [];
|
|
for(let i=0; i<pixels.length; i+=4){
|
|
pixelIndices.push(i);
|
|
}
|
|
|
|
// Shuffle de pixels voor random effect
|
|
for(let i=pixelIndices.length-1; i>0; i--){
|
|
const j = Math.floor(Math.random()*(i+1));
|
|
[pixelIndices[i], pixelIndices[j]] = [pixelIndices[j], pixelIndices[i]];
|
|
}
|
|
|
|
let step = 0;
|
|
const interval = setInterval(()=>{
|
|
for(let s=0; s<1000; s++){ // aantal pixels per frame
|
|
if(step >= pixelIndices.length){
|
|
clearInterval(interval);
|
|
canvas.remove(); // alles weg
|
|
return;
|
|
}
|
|
const idx = pixelIndices[step];
|
|
pixels[idx] = 0; // R
|
|
pixels[idx+1] = 0; // G
|
|
pixels[idx+2] = 0; // B
|
|
pixels[idx+3] = 255; // A
|
|
step++;
|
|
}
|
|
ctx.putImageData(imageData,0,0);
|
|
}, 16); // ~60fps
|
|
}
|
|
|
|
// Trigger animatie na 1 sec voor demo
|
|
setTimeout(pixelWipe, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|