I've working on an Apple style image sequence scroller from codepen: https://codepen.io/jasprit-singh/pen/LYxzQjB
I want the JS to base the scroll height on a a div that is parent to the canvas, so that I can have content before and after this section without it functioning before it is in the viewport.
I think that const html = document.documentElement; is the issue as it is reading the full contents of <html> rather than the parent div I want to select. However, I don't understand how to change it.
I've tried replacing const html = document.documentElement; with const html = document.getElementById("wrap1"); but this just stop everything working with no console errors.
What am I doing wrong/ What do I need to change?
Thanks in advance!
const html = document.documentElement;
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
const frameCount = 148;
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`);
const preloadImages = () => {
for (let i = 1; i < frameCount; i++) {
const img = new Image();
img.src = currentFrame(i);
}
};
const img = new Image();
img.src = currentFrame(1);
canvas.width = 1158;
canvas.height = 770;
img.onload = function() {
context.drawImage(img, 0, 0);
};
const updateImage = index => {
img.src = currentFrame(index);
context.drawImage(img, 0, 0);
}
window.addEventListener('scroll', () => {
const scrollTop = html.scrollTop;
const maxScrollTop = html.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const frameIndex = Math.min(frameCount - 1, Math.ceil(scrollFraction * frameCount));
requestAnimationFrame(() => updateImage(frameIndex + 1));
});
preloadImages();#wrap1 {
position: relative;
z-index: 1;
margin: 0;
padding: 0;
background: #000;
}
#wrap {
height: 500vh;
}
canvas {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 100vw;
max-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}<div class="wrap1" id="wrap1">
<div class="wrap" id="wrap">
<canvas id="hero-lightpass"></canvas>
</div>
</div>from Calculate height of element using JS listener
No comments:
Post a Comment