80 lines
2.2 KiB
HTML
80 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Full Screen Pixel Wipe</title>
|
|
<style>
|
|
html, body {
|
|
margin:0; padding:0; overflow:hidden; width:100%; height:100%;
|
|
background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
|
|
font-family: sans-serif;
|
|
}
|
|
#wipeCanvas {
|
|
position: fixed;
|
|
top:0; left:0;
|
|
width:100vw; height:100vh;
|
|
z-index:9999;
|
|
cursor:none; /* muis weg */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script>
|
|
function fullScreenPixelWipe() {
|
|
// fullscreen request
|
|
if(document.documentElement.requestFullscreen) document.documentElement.requestFullscreen();
|
|
|
|
// 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 huidige body
|
|
ctx.drawImage(document.body,0,0,canvas.width,canvas.height);
|
|
|
|
// pixel data
|
|
const imageData = ctx.getImageData(0,0,canvas.width,canvas.height);
|
|
const pixels = imageData.data;
|
|
|
|
// array met alle pixel indices
|
|
let indices = [];
|
|
for(let i=0; i<pixels.length; i+=4) indices.push(i);
|
|
|
|
// shuffle indices voor random effect
|
|
for(let i=indices.length-1;i>0;i--){
|
|
const j = Math.floor(Math.random()*(i+1));
|
|
[indices[i],indices[j]]=[indices[j],indices[i]];
|
|
}
|
|
|
|
let step = 0;
|
|
const interval = setInterval(()=>{
|
|
for(let s=0;s<3000;s++){ // pixels per frame
|
|
if(step >= indices.length){
|
|
clearInterval(interval);
|
|
canvas.remove();
|
|
document.body.innerHTML = ''; // alles weg
|
|
return;
|
|
}
|
|
const idx = indices[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
|
|
}
|
|
|
|
// start animatie na 1 sec (of trigger via knop)
|
|
setTimeout(fullScreenPixelWipe, 1000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|