Apple官网的动效

这里用的requestAnimationFrame做的效果，因为他会根据你屏幕的刷新率去显示，效果比setTimeout、setInterval好


requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点：
1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

html部分代码

  
    
      
      
      
      
    
    
        
    
  
1
2
3
4
5
6
7
8
9
10
11

css部分代码

   body {
      height: 2500vh;
      background: #000;
    }

    canvas {
      position: fixed;
      max-width: 100vw;
      max-height: 100vh;
    }
1
2
3
4
5
6
7
8
9
10

这里图片都是在线的，如果想让效果更好，提前缓存出来所有图片，要不在滚动页面的时候可能会有空白的间隙。
获取图片的方法
const currentImg = index => (
index < 10
?
https://www.apple.com.cn/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/large/000${index}.png
:
https://www.apple.com.cn/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/large/00${index}.png
)

js部分代码

  const html = document.documentElement;
  const canvas = document.getElementById("apple");
  const context = canvas.getContext("2d");
  const imgCount  = 65;
  const currentImg = index => (
    index < 10 
     ? 
    `https://www.apple.com.cn/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/large/000${index}.png`
     : 
     `https://www.apple.com.cn/105/media/us/airpods-pro/2022/d2deeb8e-83eb-48ea-9721-f567cf0fffa8/anim/hero/large/00${index}.png`
  )
  const preloadImg = () => {
    for (let i = 1; i < imgCount ; i++) {
      const img = new Image();
      img.src = currentImg(i);
    }
  };

  const img = new Image()
  img.src = currentImg(1);
  canvas.width=1440;
  canvas.height=810;
  img.onload=function(){
    context.drawImage(img, 0, 0);
  }

  const updateImg = index => {
    context.clearRect(0, 0,   canvas.width,   canvas.height)
    img.src = currentImg(index);
    context.drawImage(img, 0, 0);
  }

  window.addEventListener('scroll', () => {  
    const scrollTop = html.scrollTop;

    const maxScrollTop = html.scrollHeight - window.innerHeight;
    const scrollFraction = scrollTop / maxScrollTop;
    const index = Math.min(
      imgCount  - 1,
      Math.ceil(scrollFraction * imgCount )
    );
    requestAnimationFrame(() => updateImg(index + 1))
  });

  preloadImg()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

核心代码
window.addEventListener(‘scroll’, () => {
const scrollTop = html.scrollTop;
const maxScrollTop = html.scrollHeight - window.innerHeight;
const scrollFraction = scrollTop / maxScrollTop;
const index = Math.min(
imgCount - 1,
Math.ceil(scrollFraction * imgCount )
);
要算出当前滑动后是应该显示第几张图片