<canvas id="hero-lightpass" />
html {
height: 100vh;
}
body {
height: 500vh;
background: #000;
}
canvas {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100vw;
max-height: 100vh;
}
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
const currentFrame = index => (
`https://www.apple.com/105/media/us/airpods-pro/2019/1299e2f5_9206_4470_b28e_08307a42f19b/anim/sequence/large/01-hero-lightpass/${index.toString().padStart(4, '0')}.jpg`
)
// Set canvas dimensions
canvas.width=1158;
canvas.height=770;
// Create, load and draw the image
const img = new Image()
img.src = currentFrame(1); // we'll make this dynamic in the next step, for now we'll just load image 1 of our sequence
img.onload=function(){
context.drawImage(img, 0, 0);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.