On the iPadAir introduction page of the apple website, how does one implement the effects of rolling devices and screen changes on webpages? Is it a video? -

ViaApple-iPadAir via Apple-iPad Air Reply content: the page uses a common single page rendering method.

Specific implementation methods:
1. Divide the page content into several single pages, each of which is displayed in the entire visible area;
2. Trigger page switching by monitoring mouse scroll/clicking events in the right navigation list;
3. When switching the subpage, there are two portals: forward/reverse. Used to control the playback direction of an animation on a page.

The animation on the page does use the video (source file: http://images.apple.com/media/us/ipad-air/2013/0be12b9f-265c-474c-a0cc-d3c4c304c031/overview/desktop/story/story.mp4 ), But you can also use the CSS3/Canvas/WebGL method. However, development and compatibility are troublesome. It is very convenient to use videos, but there will be too many files (the original video is 16.1 MB) and the resolution cannot be adaptive.

Provided with the iPad model on Lao3D, WebGL implementation: fishing 3D-iPad

Append @ 2013-10-26 23:07:50
Videos on the original page cannot be loaded, and all the videos are replaced with images. It is unclear whether it is a network problem or whether Apple has deleted the video. Thank you!
Learnshare is basically right, that is, video, but there is only one video segment, and the URL is also fixed.
Apple divides each display page into n layers, each layer occupies the entire screen, and the top layer is used to play videos.
When a page is scrolling, the old layer is sunk by changing the z-index of different layers, and the new layer is floated up, meanwhile, you can use javascript to control the video playback direction and progress (HTML5 provides a set of APIS for video operations ).
Of course, other technologies can also be used. In addition to Canvas, CSS3, WebGL, or something, apple used a zombie technology on the official website, and used the photo sequence for 3D display in the horizontal direction. I remember using more than 70 photos from various angles, however, the link cannot be found now. I was invited for the first time. Haha.
After reading the video, we can see a mp4 request using the Chrome developer tool.
The learnshare on the specific principle has already been explained clearly, so I will not talk much about it.

However, learnshare mentioned that the resolution cannot be adaptive. Apple adopts a similar "responsive" solution, which is to put several videos with different resolutions, determine in advance whether it is desktop or tablet to decide which video to load. For example, for videos on desktop, the resolution is 2880*1800 and the size is 16 Mb. For iPad videos, the resolution is 1342*1064 and the size is 10.3M.

In fact, Apple also made a division of this video, such as this paragraph (http://images.apple.com/media/cn/ipad-air/2013/0be12b9f-265c-474c-a0cc-d3c4c304c031/overview/desktop/intro/intro.mp4 ), But when you use a desktop browser to browse the video, you directly request the complete video without looking at the code carefully. The split video may be used to load traffic savings on mobile devices in segments.

In addition ...... Apple tested the browser. Safari, Chrome, and Firefo were videos, While IE was visiting ...... Only images, you know ......

Thank you for your patience. It looks like mp4. Thank you for your invitation. This is a video. It is not completely css or js animation. Video is presented in combination with inspection scrolling