如何解决花式滚动动画如在Apple Airpods专业版页面上
我正在尝试通过使用多个图像来创建类似于Apple Airpods专业页面上的滚动动画。
但是正如您所看到的,我对所有图像都有问题,并且在我滚动时,所有图像都停留在屏幕上...
有我的js文件。
const html = document.documentElement;
const canvas = document.getElementById("hero-lightpass");
const context = canvas.getContext("2d");
const frameCount = 162;
const currentFrame = index => (
`images/Women${index.toString().padStart(4,'0')}.png`
)
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);
}
const updateImage = index => {
img.src = currentFrame(index);
context.drawImage(img,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()`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。