【サイト分析】 Plantica

フラワークリエイティブスタジオのPlanticaさんのサイト。デザイン&開発はGarden Eightさん。

https://plantica.net/

推しポイント

1. TOPのこの演出 🔽
予測できない展開。いい意味で驚かされる
窓の外から別の世界に入り込んでいくような感覚

2. 画像のプレ表示
画像が表示される前に、フィルターをかけたようなとても小さい画像を表示させてる。画像にただopacity0=>1だと余白が広い時間が一瞬できるのに対し、pre画像があると余白はそのままだけど動きがあっていい。
読み込みまでの時間確保にもなってるのかな

3. 全画面画像からの右側のみスクロール
左右どちらかをstickyで固定して反対側がスクロールなのはたまに見るけど、全画面画像→それを左側に見せつつ右側スクロールは初めて見た。
セクションの区切りにもなってていいな

4. カーソルが通ったところに出てくる花と葉っぱ🌿
可愛いすぎて禿げる🌻

5. ポップアップで出てくるMenu
コンテンツがたくさんあるからシンプルで小さめなMenuでバランスとっているように感じた💭
SPで同じレイアウトにできるところも開発目線で好きなポイント

設計

アーキテクチャ

• 非同期遷移かな・・💭

JavaScriptライブラリ

• Barba.js：非同期遷移のライブラリ

• Lenis.js：スクロールに連動した演出をサポートするライブラリ

• Axios.js：HTTP通信を簡単にしてくれるライブラリ

レスポンシブ対応

• 幅770、852、1200などを境目に部分的にレイアウト変更

• 横スクロールエリア

  • タッチデバイス：普通の横スクロール（横にスワイプで横にスクロールする）

  • その他：縦方向のスクロールで横方向にスクロール

フォントサイズ

• html

  • font-size: max(.902vw,12px);

• テキスト要素

  • max(vw, px)

演出

TOPの画像の枠が広がって全画面画像になるところ

• 枠はclip-pathをアニメーションさせてる

clip-path: inset(calc(var(--hero-t)*var(--p2)) calc(var(--hero-r)*var(--p2)) calc(var(--hero-b)*var(--p2)) calc(var(--hero-l)*var(--p2)) round calc(var(--r)));
// --hero-x/--rは画面幅によって決まる値, --p1/p2はスクロールで変化する値

• 画像はscaleとtranslateのアニメーション

transform: scale(calc(1 + var(--p2)*0.1)) translate(calc(var(--hero-x)*var(--p2)));

画像の前に小さいプレ画像を表示

本画像もプレ画像もopacityのアニメーションをクラスの付け替えでやってる

カーソルが通ったところに出てきて消える花と葉っぱ

元々画像の要素はあって、JavaScriptでイベント取得してscale変化させて表示してるように見えた・・
でもちゃんとはわからなかった。。

慣性スクロールとパララックス

Lenis.jsを使ってやってるのかな...💭
以前スクロールに応じたアニメーションをバニラJavaScriptでやったらカクつきの対策が大変だったからこのライブラリ使ってみたい