我怎样才能让这个类似苹果的图像序列 animation 在网站中间开始，而不是只在顶部？

Question

我找不到在除网站顶部之外的任何其他部分触发此图像序列 animation 的示例。

animation 工作正常，问题是：如果我将任何内容放在 canvas 上方，图像序列仍将链接到页面顶部。 因此，当用户到达 animation 时，他们会看到它已经完成了一半。

我想请求您的帮助，将这个 animation 的起点更改为仅在它进入视口时，不一定在页面顶部。

我还将留下一个指向在 codepen 上运行的相同代码段的链接，以防万一： https://codepen.io/querubim_reginaldo/pen/OJzoOXK

提前致谢！

 const html = document.documentElement; const canvas = document.getElementById("pro_display_animation"); 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 + 1).toString().padStart(4, '0')}.jpg` ); // total of image files const frameCount = 160; // sets the canvas size to full screen canvas.width = document.documentElement.clientWidth * 1; canvas.height = document.documentElement.clientHeight * 1; // draws the first image on screen const img = new Image(); img.src = currentFrame(1); img.onload = function() { context.drawImage(img, 0, 0); }; // updates the image in sequence const updateImage = index => { img.src = currentFrame(index); context.drawImage(img, 0, 0); } // links the scroll position with the correct image 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)) });

 body { margin: 0; padding: 0; } #section_canvas_animation { display: flex; justify-content: center; align-items: flex-start; height: 1200vh; width: 100vw; background: #efefef; } canvas { position: sticky; top: 0; max-width: 100vw; max-height: 100vh; }.website_content { height: 400vh; background: darkcyan; display: flex; justify-content: center; align-items: center; color: white; font-size: 100px; }

 <body> <div id="section_canvas_animation"> <canvas id="pro_display_animation"></canvas> </div> <div class="website_content">THIS IS SOME WEBSITE CONTENT</div> </body>

`

Answer 1

在这里查看我的演示： https://www.sfertons.dev/lab/apple-scroll-sequence-animation

诀窍是考虑“动画序列” offsetTop 并使用它的 scrollHeight 来计算 maxScrollTop：

const scrollTop = document.documentElement.scrollTop - heroSequence.offsetTop
const maxScrollTop = heroSequence.scrollHeight - window.innerHeight

该项目也在我的 Github 上： https://github.com/Spharian/apple-sequence-animation

我怎样才能让这个类似苹果的图像序列 animation 在网站中间开始，而不是只在顶部？

问题描述

1 个解决方案

解决方案1
0 2022-08-02 10:09:30

我怎样才能让这个类似苹果的图像序列 animation 在网站中间开始，而不是只在顶部？

问题描述

1 个解决方案

解决方案1 0 2022-08-02 10:09:30

解决方案1
0 2022-08-02 10:09:30