Lab

木漏れ日で選ぶ、時間帯ごとの光

朝・昼・夕を切り替えると、木漏れ日の影の長さ・傾き・濃さ、写真、数字がなめらかに変わる。影は風で揺れる。架空の工務店の施工事例ページを想定した自主制作です。

使えそうな案件

住宅・不動産・宿泊施設など、光や時間の違いを見せたいページ。

使った技術

  1. 01GSAP(to・quickTo・CustomEase)
  2. 02SVGの葉と、CSS transformだけで揺らす影
  3. 03mix-blend-mode: multiply

見え方の違い

動きを減らす設定のとき
影の揺れとマウスの動きを止め、完成形で表示します(影は表示したまま)。

作ってみて分かったこと

影そのものをゆがませる方法では「ゆらゆら歪む」だけで風に見えず、重くもなりました。小さな枝ごとに分けて、transformの回転だけで揺らす作りに変えると、軽く、風が渡るように見えました。