【サイト分析】 Plantica
フラワークリエイティブスタジオのPlanticaさんのサイト。デザイン&開発はGarden Eightさん。
推しポイント
1. TOPのこの演出 🔽
予測できない展開。いい意味で驚かされる
窓の外から別の世界に入り込んでいくような感覚
2. 画像のプレ表示
画像が表示される前に、フィルターをかけたようなとても小さい画像を表示させてる。画像にただopacity0=>1だと余白が広い時間が一瞬できるのに対し、pre画像があると余白はそのままだけど動きがあっていい。
読み込みまでの時間確保にもなってるのかな
3. 全画面画像からの右側のみスクロール
左右どちらかをstickyで固定して反対側がスクロールなのはたまに見るけど、全画面画像→それを左側に見せつつ右側スクロールは初めて見た。
セクションの区切りにもなってていいな
4. カーソルが通ったところに出てくる花と葉っぱ🌿
可愛いすぎて禿げる🌻
5. ポップアップで出てくるMenu
コンテンツがたくさんあるからシンプルで小さめなMenuでバランスとっているように感じた💭
SPで同じレイアウトにできるところも開発目線で好きなポイント
設計
アーキテクチャ
非同期遷移かな・・💭
JavaScriptライブラリ
レスポンシブ対応
幅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でやったらカクつきの対策が大変だったからこのライブラリ使ってみたい