页面滚动时触发图片逐帧播放_如何在滚动效果上创建逐帧运动图像

页面滚动时触发图片逐帧播放

A step by step guide on how to create that dynamic image background you see everywhere.

有关如何创建随处可见的动态图像背景的逐步指南。

内容 (Content)

1. Introduction
   介绍
2. Result demo
   结果演示
3. Prerequisite
   先决条件
4. Step by step guide
   逐步指南
5. Next step
   下一步

介绍 (Introduction)

Moving an image on scroll is the new parallax for the frontend. In the old days, parallax was everywhere. But it rarer for new websites. Instead, we see a lot of moving image by scrolling pattern — for example, apple new iPhone SE website:

滚动移动图像是前端的新视差。 在过去，视差无处不在。 但这对于新网站来说很少见。 取而代之的是，我们通过滚动模式看到了很多动态图像，例如，苹果新的iPhone SE网站：

The iPhone rotate nicely on scrolling down (and reverse when scroll up)

iPhone在向下滚动时可以很好地旋转(向上滚动时可以反向旋转)

As you can see, the iPhone rotates frame by frame as you scroll down. In this tutorial, I will share my approach for reproducing such pattern.

如您所见，iPhone在向下滚动时会逐帧旋转。 在本教程中，我将分享重现这种模式的方法。

结果演示 (Result demo)

As you can see from the scroll bar, the content changes by scroll position

从滚动条可以看到，内容随滚动位置而变化

Codepen: https://codepen.io/josephwong2004/pen/wvKPGEO

Codepen： https ：//codepen.io/josephwong2004/pen/wvKPGEO

先决条件 (Prerequisite)

Just basic knowledge in CSS and JS

只是CSS和JS的基础知识

逐步指南 (Step by step guide)

Step 1: Get some images

第1步：获取一些图片

Okay, I guess you already figured it out. The “Moving image” is actually just a bunch of images with small differences, and played frame by frame like an animation. By mapping the scroll position to a corresponding image, we get an illusion of the object in the images itself is moving or rotating.

好的，我想您已经知道了。 “运动图像