下記のiPhone公式サイトで実装されているアニメーション表現について質問させて頂きます。
https://www.apple.com/jp/iphone-xr/
このページをPCで閲覧した際、ページの中程までスクロールした際に発動するアニメーションがあります。
「 進化したFace ID。あなたの顔がパスワードになれば、高度な〜 」
というコピーの部分の下です。
スクロールするとiPhoneの画像が現れ、スクロールに伴ってiPhone画像が拡大すると共に、
画面上下から黒いマスクが現れてiPhone画像の表示領域が狭まってゆき、一本の横に長い線になります。
さらにスクロールすると、この線の部分が輝いてアニメーションし、次の展開として座標のグリッドが
アニメーションで現れます。
私のJSの少ない知識では、パララックスのアニメーションのようだなぁと思いますが、
パララックスの場合、1つの画像を拡大したり、移動させたりはできるのですが、iPhoneサイトのように
明らかに画像が切り替わっていたり、光の帯の部分のように動画のコマをスクロールに連動させて動かしている
ような表現の実現方法が分かりません。ソースを見てみましたが、理解できませんでした。
このような表現は、どのような技術などで実現されているのでしょうか?
TweenMaxなどを使えばできるのでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/04 04:35
2019/04/04 16:08