ホームページ > ウェブフロントエンド > H5 チュートリアル > 苹果官网设计翻转特效如何实现?

苹果官网设计翻转特效如何实现?

WBOY
リリース: 2016-06-07 08:42:44
オリジナル
2771 人が閲覧しました

苹果官网目前的翻页视差效果,不同于目前人们所熟知的上下元素或者左右元素的位移差。例如目前Apple Watch页面来看Apple Watch - Apple (中国),在页面翻滚的同时,手表也会以空间形式的翻转。现在来看手表绝不是一个简单的png图片了。这种是运用了JQ和CSS3的哪些效果可以实现的,还有就是需要什么样的图片素材可以满足这种翻转。希望大神能够帮忙解析一下

回复内容:

谢邀。

有趣的效果。

实际上是 css3 的变换(transform) ,和 canvas 帧动画。

注意看下图,这是其中一个手表的图片。

苹果官网设计翻转特效如何实现?
单单为了做这一个手表的动画,发了104 个请求(汗。。)

然后第一个图片的表带是张开的,后面的图片越来越闭合,这就是帧动画。

然后同一帧图片有两个请求,一个 png, 一个 svg , svg 是用来做蒙板抠图用的( Photoshop 用过么?)。这一这里的 .globalCompositeOperation 。

苹果官网设计翻转特效如何实现?

实际上还有优化空间,可以用 sprite sheet 把这些散图拼起来,节约 http 请求。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート