使えそうな案件
住宅・不動産・宿泊施設など、光や時間の違いを見せたいページ。
使った技術
- 01GSAP(to・quickTo・CustomEase)
- 02SVGの葉と、CSS transformだけで揺らす影
- 03mix-blend-mode: multiply
見え方の違い
- 動きを減らす設定のとき
- 影の揺れとマウスの動きを止め、完成形で表示します(影は表示したまま)。
作ってみて分かったこと
影そのものをゆがませる方法では「ゆらゆら歪む」だけで風に見えず、重くもなりました。小さな枝ごとに分けて、transformの回転だけで揺らす作りに変えると、軽く、風が渡るように見えました。