当前位置：文江博客话题详情

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

发布于 2025-01-20 22:23:49 字数 2603 浏览 0 评论 0 原文

我找不到一个示例，除了网站顶部外，其他任何部分都触发了此图像序列动画。

动画的工作正常，问题是： 如果我将任何内容放在画布上方，则图像序列仍将链接到页面顶部。当用户进入动画时，他们将已经看到它的一半。

因此，只有当它进入视口时，不一定在页面顶部。

我还将留下一个在Codepen上运行的相同精确片段的链接，以防万一： https://codepen.io/querubim_reginaldo/pen/pen/ojzooxkk

预先感谢！

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>

原文

I couldn't find an example where this image sequence animation is triggered at any other part except on the top of the website.

The animation is working fine as it is, the problem is: if i put any content above the canvas, the image sequence will still be linked to the top of the page. So when the user gets to the animation, they will see it already half way through.

I'd like to ask for your help to change the starting point of this animation to only when it enters the viewport, not necessarily on the top of the page.

I'll also leave a link to the same exact snippet running on codepen, just in case: https://codepen.io/querubim_reginaldo/pen/OJzoOXK

Thanks in advance!

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

滿滿的愛 2025-01-27 22:23:49

在此处查看我的演示： https://www.sfertons.dev.dev/lab/apple/lab/apple/apple/lab/apple -scroll-sequence-Animation

诀窍是考虑“动画序列”偏移量，并使用其卷轴来计算MaxScrolltop：

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

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

Check my demo here: https://www.sfertons.dev/lab/apple-scroll-sequence-animation

The trick is to take the "animation sequence" offsetTop into account and use its scrollHeight to calculate the maxScrollTop:

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

The project is also on my Github: https://github.com/Spharian/apple-sequence-animation

回复收藏 0 原文

~没有更多了~

关于作者

波浪屿的海角声

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

檐前雨

鹿港巷口少年归

qq_32QL4xcD

sum_

DLL

唐婉

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

檐前雨

鹿港巷口少年归

qq_32QL4xcD

sum_

DLL

唐婉

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。