Effect Lab動きの見本帖
エフェクトラボ
（動きの見本帖）
サイトに取り入れられる動きや演出を、実際に触って比べられる見本集です。
それぞれの見本は、実際に触って動きを確かめられます。「これに近い動きにしたい」とお伝えいただければ、ご相談の出発点になります。
For your business
お店の仕事に効く
問い合わせ・予約・見積りなど、お客様の行動に直接つながる部分の動きです。
-
予約カレンダー（月間・複数拠点×スタッフ）
拠点・スタッフ・時間帯が入り組んだ月間カレンダー。枠をタップすると予約希望のLINE文面プレビューが開きます。
JS / MOCK CALENDAR
見本を開く（別タブ）
-
ビフォーアフター比較スライダー
1枚の写真の上を左右にドラッグすると、施工前と施工後が入れ替わります。指でもキーボードでも動かせます。
JS / CLIP-PATH
見本を開く（別タブ）
-
ひらく料金表（メニューを選ぶと合計）
見出しをタップすると中身が開き、金額が数え上がります。受けたいメニューにチェックを入れると、料金と所要時間の合計がその場で出ます。
CSS GRID / LIVE TOTAL
見本を開く（別タブ）
-
のびる道順アクセス
スクロールに合わせて、駅からお店までの道が1本ずつ描かれ、目印と手順が順番に灯ります。地図画像を貼るだけのアクセスページとの差がはっきり出ます。
SVG / SCROLL SCRUB
見本を開く（別タブ）
-
やわらかいお問い合わせフォーム
見出しが上に逃げ、間違いは怒らずそっと伝え、送信ボタンはチェックに変わります。最後の一歩で離脱させないための動きです。
CSS / FORM MOTION
見本を開く（別タブ）
-
チェックで足し算される見積表
欲しいものにチェックを入れると、その場で合計が数え上がり、内訳が積み上がります。「だいたいいくら？」に問い合わせ前に答えられます。
JS / LIVE TOTAL
見本を開く（別タブ）
Showing photos
写真を見せる
実績・商品・店内の写真を、並べる・めくる・回すなど、見せ方ごとにまとめました。
-
パソコン向けの動き
立体ギャラリー（Coverflow）
写真が奥行きを持って並び、左右に送ると中央のカードが入れ替わる。ドットやキーボードの矢印キーでも操作できます。
JS + CSS 3D
見本を開く（別タブ）
-
ギャラリー無限スクロール
写真が横へ流れ続けるギャラリー。カーソルを乗せると止まり、写真がふわっと拡大します。
CSS のみ
見本を開く（別タブ）
-
スクロール分解
スクロールに合わせて、写真が粒子になって散らばり、また組み上がる。逆にスクロールすれば逆再生も自在です。
CANVAS / SCROLL SCRUB
見本を開く（別タブ）
-
パソコン向けの動き
リキッドホバー
写真の上をカーソルでなでると、水面のように液体感で歪む。ハイエンドなギャラリーサイトの定番演出です。
WEBGL / DISPLACEMENT
見本を開く（別タブ）
-
写真のマスクワイプ登場
スクロールで到達した写真が、左から・下から・中央からと布をめくるように現れます。スイッチでふつうのフェードと見比べられます。
CLIP-PATH / INTERSECTION OBSERVER
見本を開く（別タブ）
-
回すギャラリー（リング）
8枚の写真が円をつくり、つかんで回すと勢いのまま流れて正面でそろいます。全体を一望しながら自分のペースで見られます。
CSS 3D / DRAG INERTIA
見本を開く（別タブ）
Scroll storytelling
スクロールで読ませる
読み進める動作そのものを演出にして、長いページでも最後まで目を通してもらう形です。
-
スクロール連動スタッキングカード
スクロールに合わせて、カードが下から迫り上がるように積み重なっていく。読み進める行為そのものを演出にする手法です。
JS（scroll + rAF）
見本を開く（別タブ）
-
スクロール追従ライン
スクロールに合わせて1本の線が画面をくねくねと降りていく。太さはスライダーで調整可能。おまけで、カーソルに追従する糸も収録。
SVG / STROKE-DASHARRAY
見本を開く（別タブ）
-
多層パララックス
スクロールとマウスの両方に反応する奥行き表現。層ごとの速度差と、丸い窓の中に見える別の層が立体感をつくります。
SCROLL + POINTER DEPTH
見本を開く（別タブ）
-
横に流れる工程紹介
縦にスクロールすると中身が横へ流れ、工程が1つずつ現れます。「ご利用の流れ」「施工の手順」を読み飛ばさせない見せ方です。
SCROLL → HORIZONTAL
見本を開く（別タブ）
Typography
文字と第一印象
見出しやキャッチコピーの現れ方。同じ言葉でも、出方でお店の温度感が変わります。
Site experience
サイト全体の操作感
メニュー・ページ移動・カーソルなど、どのページにいても効いてくる部分です。
-
パソコン向けの動き
カスタムカーソル（追従リング）
小さな点は指先のようにぴったり追従し、外側のリングは少し遅れてついてくる。要素にホバーするとリングが吸い付くように広がります。
JS / LERP
見本を開く（別タブ）
-
全画面メニューの開き方 4種
円が広がる・上から降りる・右から入る・ふわっと現れる。同じメニューの開き方を4通り、スマホ実寸の枠で見比べられます。
CLIP-PATH / STAGGER
見本を開く（別タブ）
-
ページ遷移とローディング
ページを移るときの覆いの動きを、カーテン・フェード・スライドの3種で試せます。最初の読み込み画面も再生できます。
JS / OVERLAY TRANSITION
見本を開く（別タブ）
Atmosphere
背景と雰囲気
主役ではなく、背景でお店の空気をつくる動きです。強い写真がないときにも効きます。
-
木漏れ日が差し込む森
夜の森に、左上から光の筋がゆっくり現れます。光が地面へ届くのに合わせて、写真全体が朝の明るさへ変わります。
CSS / LAYERED LIGHT
見本を開く（別タブ）
-
水面リップル＋気泡（CSSアート）
同心円の波紋が静かに広がって消え、気泡がゆっくり立ちのぼる。画像や動画を使わず、CSSだけで水面の気配をつくります。
CSS のみ
見本を開く（別タブ）
-
星のきらめき＋流れ星
小さな星がまばたきするように光り、時おり流れ星が斜めに駆け抜けます。画像に頼らない軽量な背景演出です。
CSS のみ
見本を開く（別タブ）
-
すりガラスとシェイプ
すりガラスの奥で、グラデーションのかたまりがゆっくり流れる。ぼかしの強さはスライダーでその場で調整できます。
CSS / BACKDROP-FILTER
見本を開く（別タブ）
-
パーティクルの庭
ほたる・ながれ・ゆき・はなび。同じ粒でもルールを変えるだけで、まったく違う世界になります。ボタンで切り替えられます。
CANVAS / 4 MODES
見本を開く（別タブ）