On the apple official website, how does one design a flip effect? -

The current page-turning parallax effect on Apple's official website is different from the displacement difference of upper and lower elements or left and right elements that are currently well known. For example, the current AppleWatch page shows AppleWatch-Apple (China). When the page is tumble, the watch will also be flipped in the form of space. Now, the watch is not a simple png image. This is based on the effects of JQ and CSS3, and what kind of image material is needed to satisfy this kind of flip. I hope that the great gods can help us analyze the current page-turning parallax effect on the Apple official website, which is different from the displacement difference between upper and lower elements or left and right elements that are currently well known. For example, on the current Apple Watch page, see Apple Watch-Apple (China) When the page is tumble, the watch will also flip in the form of space. Now, the watch is not a simple png image. This is based on the effects of JQ and CSS3, and what kind of image material is needed to satisfy this kind of flip. I hope that you can help me parse the reply content: Thank you for your invitation.

Interesting results.

It is actually a css3 Transformation (transform), and canvas frame animation.

Note: This is an image of one of the watches.


In order to make the animation of this watch, I sent 104 requests (sweat ..)

Then the strap of the first image is open, and the image behind it is increasingly closed. This is frame animation.

Then there are two requests for the same frame image, one png, one svg, And the other svg, which are used for the masked image. (have you used Photoshop ?). Here. globalCompositeOperation.



In fact, there is still room for optimization. You can use sprite sheet to combine these images to save http requests.