【サイト分析】 QINO

木の新しい使いみちを発明する地域共創プロジェクトQINOさんのサイト。デザイン&開発はGarden Eightさん。

https://qino.jp/

推しポイント

1. 複数のパララックスを組み合わせた表現
慣性スクロールとも相まって、大自然のゆったりとした時間の流れを感じさせる🌿

2. パララックスやマウスストーカーの装飾が入ったスライダー
パララックスな画像の動き、ホバーの演出、マウスストーカー、左にある連動するテキスト・・
細かい演出がたくさん入っていて、ドラッグしたくなる💭

3. ホバーで画像が切り替わるNEWS
紙を捲るような画像の切り替え

4. カーテンのように開閉するメニュー
イージング難しそうだけど真似したい・・

5. ボケの表現が綺麗なメニューの背景
メニューを開いた時に背景にボケがかかって、閉じるとなくなる
背景の真ん中にあるロゴもボケと組み合わせたフェードイン/フェードアウト
これもいつか真似したい・・

設計

アーキテクチャ

• SPA？非同期遷移？　わからないけどURL遷移してもロードがない

• CMS：WordPress

• プラグイン：EWWW Image Optimizer（自動で画像を最適化してくれる）

レスポンシブ対応

• 幅750と1024を境目にレイアウト変更

• MVのテキストと画像はvwで伸縮、他のテキストなどは13~17pxくらいの範囲内でvwで伸縮、余白はvw

フォントサイズ

• html

  • clamp(13px,.95vw,17px)　// 0.95vw: 1440の時13.98px、1920の時18.24px

• テキスト

  • 装飾テキストはvw、情報としてのテキストはclamp(px,vw,px)やmin(vw,px)

演出

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

多分JavaScriptライブラリLenisを使ってる

カーテンのように開閉するメニュー

clip-pathのアニメーションで実現されてる

clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
⇅
clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%);

ボケを使ったメニューの背景

背景
↓をかけた要素をopacity: 0 ⇄ 1でアニメーション

backdrop-filter: blur(10px)
background: rgba(0,0,0,.6)

ロゴ
filter: blur(10px) ⇄ blur(0px)とopacity :0 ⇄ 1でアニメーション

紙を捲るような画像の切り替え

clip-pathとscaleで実現されてる

transform: scale(1.1) → scale(1.0);  // 入る時のみ
clip-path: inset(100% 0% 0%) → inset(0%);  // 入る時
clip-path: inset(0%) → inset(0% 0% 100%);  // 出る時