背景を固定してアニメーション

javascriptのアニメーションに関して質問させて下さい。

###前提・実現したいこと

左からフェードインして、拡大するアニメーションを行いたいです。
背景の画像サイズは画面にフィットさせて、表示領域だけを拡大していくアニメーションを描きたいです。
参考のサイトはこちらで、FV部分のアニメーションです。

###発生している問題・エラーメッセージ

現状では画像部分自体が拡大されてしまう

###該当のソースコード
現状コードcodepen

###試したこと
cssのクリップパスを使ったりしてみたのですが、上手く表示されませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)
アニメーションにTweenmaxを使用しています。

ご存知の方いらっしゃいましたらご教示頂けますと幸いです、よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

画像がフェードインしてきてるというよりも、マスクが横からフェードインしてる感じですね。
なので、サンプルプログラムの考えでは実現出来ないと思います。
考え方としては
・画像を背景に表示領域全体にフィットさせて配置。
・上記画像に対してCSSのclip-pathでマスクをかけます。（マスクが0x0サイズであればこの時点で背景画像は非表示）
・マスクをcssのtransform:scale3dなどで拡大（0x0を100%x100%にする感じですね）
・上記処理が終わったら、背景の画像をscaleなどで拡大
で実現できるのではないでしょうか。
（サンプルを作る時間が無くてすみません）