検索…

カタログ統計

CATALOG › Motion › Scroll Animation

スクロール演出

フェードから丸窓・円展開・観音開き・多層視差まで — スクロールで「部分から現れる」を作る32パターン。全てCSSのみ・標準ブロック。

Patterns

Motion

Group

isValid=0

Verified

CSS

Animation

Scroll — Animation Class Demo

scroll-animation-demo

Copy

Link

スクロール演出

.tf-fade-up

下から軽く浮かびながらフェードイン。最も汎用。

.tf-fade-in

移動なしの単純フェード。控えめな演出に。

.tf-stagger > *

親に付けると子要素が順番に登場。リスト向き。

.tf-zoom-in

少しだけ拡大しながら登場。アクセントに。

パターン名: Scroll — Animation Class Demo
概要: Demo card list of available scroll-triggered animation classes (fade-up / fade-in / stagger / zoom-in).
使用目的: Scroll Animation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 880px、主要ブロック group, heading, group, group, paragraph, paragraph, group, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Scroll Animationをミニマルに見せる余白重視版 / Scroll Animationをリッチに見せるカバー/カード強調版 / Scroll Animationをコーポレート向けに整える情報密度高め版 / Scroll Animationをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/scroll-animation-demo"} /-->

CSS:
.section-scroll-animation-demo { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-scroll-animation-demo').forEach((el) => el.dataset.ready = 'true');

Scroll — 3-Column Fade-Up Trio

scroll-fade-trio

Copy

Link

🎯

明確な目標

スクロールに合わせて 1 つずつ要素が登場。視線を自然に誘導します。

📈

継続的な成長

stagger 演出で時差をつけることで、リズムある印象を与えます。

✨

滑らかな体験

prefers-reduced-motion 対応で、ユーザー設定を尊重します。

パターン名: Scroll — 3-Column Fade-Up Trio
概要: Three columns that fade up with staggered timing.
使用目的: Scroll Animation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 複数カラムで情報を分割する構造、幅配分 auto、推奨コンテンツ幅 1080px、主要ブロック group, columns, column, paragraph, heading, paragraph, column, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Scroll Animationをリッチに見せるカバー/カード強調版 / Scroll Animationをコーポレート向けに整える情報密度高め版 / Scroll Animationをカジュアルに見せるアイコン/ラベル強調版 / Scroll Animationをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/scroll-fade-trio"} /-->

CSS:
.section-scroll-fade-trio { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-scroll-fade-trio').forEach((el) => el.dataset.ready = 'true');

Scroll — Layered Fade Cover

scroll-layered-cover

Copy

Link

★ LAYERED ANIMATION

層をなして降りてくる

3 層に分けて時差をつけたフェードイン。
cover ブロックの上で奥行きを表現します。

パターン名: Scroll — Layered Fade Cover
概要: Cover block with three sequentially-delayed fade-up layers.
使用目的: Scroll Animation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: ビジュアル面を中心にしたカバー構造、幅配分 auto、推奨コンテンツ幅 auto、主要ブロック cover, paragraph, heading, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Scroll Animationをミニマルに見せる余白重視版 / Scroll Animationをリッチに見せるカバー/カード強調版 / Scroll Animationをコーポレート向けに整える情報密度高め版 / Scroll Animationをカジュアルに見せるアイコン/ラベル強調版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/scroll-layered-cover"} /-->

CSS:
.section-scroll-layered-cover { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-scroll-layered-cover').forEach((el) => el.dataset.ready = 'true');

Scroll — Zoom Reveal Hero

scroll-zoom-reveal

Copy

Link

🌟

スクロール・ズームリビール

画面に入ってきた瞬間に、ぐっと拡大しながら登場。
ヒーローや見せたいセクションのアクセントに。

パターン名: Scroll — Zoom Reveal Hero
概要: Single hero block that zooms in as it enters viewport.
使用目的: Scroll Animation領域で情報の優先順位、視線誘導、次の行動を短時間で組み立てるためのUI。
適用シーン: ランディングページ、下層ページ、サービス紹介、比較検討、問い合わせ前後の補足導線。
レイアウト構造: 縦積みの情報整理構造、幅配分 auto、推奨コンテンツ幅 720px、主要ブロック group, paragraph, heading, paragraph

メリット: ブロック単位で差し替えやすく、商用サイト制作時に構成案として再利用しやすい。
デメリット: 実案件ではブランドトーン、原稿量、画像比率に合わせて余白とカラム幅の再調整が必要。
バリエーション案: Scroll Animationをリッチに見せるカバー/カード強調版 / Scroll Animationをコーポレート向けに整える情報密度高め版 / Scroll Animationをカジュアルに見せるアイコン/ラベル強調版 / Scroll Animationをモバイル特化にした単列・短文版
実装時の注意点: 独自HTMLブロック化せず、Group/Columns/Cover/List/ButtonなどのGutenberg標準ブロックとして編集する。ボタン、画像、余白、色はWordPressの保存HTMLと一致する属性で調整する。

HTML:
<!-- wp:pattern {"slug":"tf-premium/scroll-zoom-reveal"} /-->

CSS:
.section-scroll-zoom-reveal { max-width: 1200px; margin-inline: auto; }

JS:
document.querySelectorAll('.section-scroll-zoom-reveal').forEach((el) => el.dataset.ready = 'true');

Scroll — FX01 Iris Window

fx-iris

Copy

Link

パターン名: 丸窓リビール — Scroll — FX01 Iris Window
概要: 色面に開いた円窓が広がり、中の写真が現れる
使用目的: 導入部で被写体へ視線を一点集中させたい場面
適用シーン: ヒーロー直後の1枚見せ、商品・作品の初出し
使い方: グループに fx-iris(中に画像)/画像ブロック直付けも可

メリット: 「部分から全体へ」の期待感。色面と写真の対比が上品
デメリット: 縦長すぎる画像は円が間延びする(3:2〜16:9推奨)
バリエーション案: 円の中心を左右にずらす/開き切りを80%で止める版
実装時の注意点: 角の完全表示は円半径76%必要。reduced-motionでは全表示

クラス: fx-iris(グループに付与 / 画像ブロック直付けも可)
構成: グループ(背景色つき) > 画像1枚
調整: 開き方 = animation-range(entry 25% → cover 70%)

Scroll — FX02 Bloom Expand

fx-bloom

Copy

Link

パターン名: 円→全面展開 — Scroll — FX02 Bloom Expand
概要: 小さな円形写真がスクロールで全幅16:9へ膨らむ
使用目的: 世界観の「開幕」を1スクロールで演出
適用シーン: ブランドストーリー冒頭、コレクション切替
使い方: グループに fx-bloom(中に画像1枚)

メリット: ピン留め+変形で滞在感が強い。Apple型の定番
デメリット: 滑走路230vhぶん縦に長くなる
バリエーション案: 高さ(230vh)や開始径40%の調整/正方形止め
実装時の注意点: ページ最終セクションには置かない(退出余白必要)

クラス: fx-bloom(グループに付与)
構成: グループ > 画像1枚(滑走路230vhとピン留めは自動)
注意: ページ最終セクションには置かない(退出余白が必要)

Scroll — FX03 Venetian Blinds

fx-blinds

Copy

Link

パターン名: ブラインド開き — Scroll — FX03 Venetian Blinds
概要: 横帯マスクが太りながら写真が全開になる
使用目的: 「覗き見→開放」のリズムで写真を見せる
適用シーン: ギャラリー先頭、ビフォーアフター提示前
使い方: 画像ブロックに fx-blinds 直付け

メリット: 機械的な帯の動きがモダン。羽根数は自動
デメリット: 細かい文字入り画像は開き途中が読みにくい
バリエーション案: 帯の初期太さ(11%)調整で羽根の枚数感を変更
実装時の注意点: マスク非対応環境では最初から全表示

クラス: fx-blinds(画像ブロックに直付け)
調整: 羽根の初期太さ = keyframes fxBlindsK の 11%

Scroll — FX04 Panel Split

fx-split

Copy

Link

観音開きの、その先へ。

左右のパネルがスクロールで開き、静かに本文を差し出します。

パターン名: 観音開き — Scroll — FX04 Panel Split
概要: 左右のアクセント色パネルが開いて中身を見せる
使用目的: 本文・宣言文を「儀式感」を持って開示
適用シーン: コンセプト文、料金発表、キャンペーン解禁
使い方: グループに fx-split(–fx-split-cで色変更可)

メリット: 中身はテキストでも画像でも可。色はブランドで統一
デメリット: 開き終わるまで中身が読めない(重要情報は前後に)
バリエーション案: 上下開き版/片開き版の追加実装が容易
実装時の注意点: reduced-motionではパネル自体を出さない設計済み

クラス: fx-split(グループに付与)
色変更: --fx-split-c で指定(既定はアクセント色)
中身: 任意のブロック(テキスト/画像)

Scroll — FX05 Spotlight Sweep

fx-spotlight

Copy

Link

暗がりに、光を通す。

スポットライトが文章の上を走査し、読む場所を照らします。

パターン名: スポットライト — Scroll — FX05 Spotlight Sweep
概要: 暗幕の丸い光がスクロールで文面を走査する
使用目的: 暗転セクションで視線誘導と没入感を作る
適用シーン: 夜メニュー、シアター風の演出、引用の強調
使い方: グループに fx-spotlight(背景は暗色推奨)

メリット: 文字主体でも成立。照明のような高級感
デメリット: 長文には不向き(光の外が読みにくい)
バリエーション案: 光径(gradient 5.5%)や走査方向の変更
実装時の注意点: reduced-motionでは暗幕ごと非表示で全文可読

クラス: fx-spotlight(暗色背景のグループに付与)
調整: 光の径 = radial-gradient 5.5% / 10.5%

Scroll — FX06 Type Fill

fx-text-mask

Copy

Link

SCROLL DESIGN

文字の中をブランドカラーが流れる。画像も指定可(–fx-tm-img)。

パターン名: 巨大文字マスク — Scroll — FX06 Type Fill
概要: 見出し文字の中をグラデ/画像が流れる
使用目的: タイポグラフィ主役のブランド見せ場
適用シーン: セクション見出し、キービジュアル代替
使い方: 見出しに fx-text-mask(–fx-tm-imgで画像指定可)

メリット: 文字はそのまま編集可能。画像差し替えも1行
デメリット: 細いフォントだと中の絵柄が見えにくい
バリエーション案: 流れる速度=表示範囲(cover)の調整/静止版
実装時の注意点: 太字・大サイズ推奨(4rem以上で映える)

クラス: fx-text-mask(見出しブロックに付与)
画像指定: style="--fx-tm-img:url(...)"(コードエディタで1行)
推奨: 太字・4rem以上

Scroll — FX07 Depth Layers

fx-layers

Copy

Link

奥行きが、語る。

三層が異なる速度で流れ、視差の奥行きを生みます。

パターン名: 多層パララックス — Scroll — FX07 Depth Layers
概要: 重ねた3子要素が異なる速度で流れ奥行きを生む
使用目的: 1画面に「背景・中景・言葉」の立体感を出す
適用シーン: ブランドの世界観カット、店内紹介
使い方: グループに fx-layers(子1=背景/子2=中景/子3=前景)

メリット: 子は通常ブロックのまま。画像+文字の混載可
デメリット: 子3つ想定(4つ目以降は静止)
バリエーション案: 速度差はA/B/Cの振幅(7/15/26%)で調整
実装時の注意点: 前景テキストは半透明背景を敷くと可読性が安定

クラス: fx-layers(グループに付与)
構成: 子1=背景(遅) / 子2=中景 / 子3=前景(速)
速度: 振幅 7% / 15% / 26%

Scroll — FX08 Skew Frame

fx-skew-panel

Copy

Link

境界は、まっすぐでなくていい。

セクションの斜め境界がスクロールに合わせて振れます。

パターン名: 斜め境界セクション — Scroll — FX08 Skew Frame
概要: 斜めに切れたセクション境界がスクロールで振れる
使用目的: 直線的なページに動的なリズムを差し込む
適用シーン: CTA帯、キャンペーン帯、章の区切り
使い方: グループに fx-skew-panel(背景色/グラデ推奨)

メリット: 中身は完全に通常編集。境界だけが動く
デメリット: 上下3.5%は常に切り落とされる(余白必要)
バリエーション案: 傾き角(3.5%)の増減/静止版(クラスのみ)
実装時の注意点: 内側に余白(padding)を十分に取ること

クラス: fx-skew-panel(グループに付与、背景色/グラデ推奨)
注意: 上下3.5%が切り落とされるため内側にpaddingを十分に

Scroll — FX09 Strip Sweep

fx-strips

Copy

Link

パターン名: 縦ストライプ立ち上がり — Scroll — FX09 Strip Sweep
概要: 細い縦帯が先行し、左から右へ写真が全開になる
使用目的: リズミカルな「順番に現れる」を1枚の画像で
適用シーン: ギャラリー導入、製品カットの初出し
使い方: 画像ブロックに fx-strips 直付け(グループ内でも可)

メリット: 帯→全開の二段構えで動きが豊か
デメリット: 柄が細かい写真は帯が見えにくい
バリエーション案: 帯の太さ=マスク第2層の6%/12.5%
実装時の注意点: マスク非対応環境では最初から全表示

使い方: 画像ブロックに fx-strips 直付け(グループ内でも可)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX10 Ink Bleed

fx-ink

Copy

Link

パターン名: にじみリビール — Scroll — FX10 Ink Bleed
概要: ぼかした円がにじむように広がって現れる
使用目的: irisより柔らかい・情緒的な開き方
適用シーン: ストーリー冒頭、和風・手仕事系の写真
使い方: 画像ブロックに fx-ink 直付け(グループ内でも可)

メリット: エッジが柔らかく上品
デメリット: 途中状態では周辺が見えない
バリエーション案: にじみ幅=radial 52%/74%の差
実装時の注意点: reduced-motionでは全表示

使い方: 画像ブロックに fx-ink 直付け(グループ内でも可)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX11 Cinema Slit

fx-slit

Copy

Link

パターン名: シネマスリット — Scroll — FX11 Cinema Slit
概要: 横長のスリットが上下に開いて全面へ
使用目的: 映画的な「開幕」を写真1枚で
適用シーン: ヒーロー直下、章の切り替わり
使い方: 画像ブロックに fx-slit 直付け(暗背景グループ推奨)

メリット: レターボックス→全開の高揚感
デメリット: 被写体が中央にない写真は途中が寂しい
バリエーション案: 初期スリット高=inset 46.5%
実装時の注意点: クリップ非対応環境では全表示

使い方: 画像ブロックに fx-slit 直付け(暗背景グループ推奨)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX12 Matte Frame

fx-frame

Copy

Link

パターン名: 額縁マット開き — Scroll — FX12 Matte Frame
概要: 写真を覆う太い縁がスクロールで細い額縁へ引く
使用目的: ギャラリーの額装感・作品扱いの見せ方
適用シーン: 作品紹介、こだわりカット
使い方: グループに fx-frame(中に画像)。縁色は–fx-frame-c

メリット: 静止時も「細額縁」で意匠が残る
デメリット: 縁色と背景の相性に注意
バリエーション案: 縁色変更/最終縁の太さ0.8rem
実装時の注意点: reduced-motionでは細額縁で静止

使い方: グループに fx-frame(中に画像)。縁色は--fx-frame-c
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX13 Focus Pull

fx-focus

Copy

Link

パターン名: ピント合わせ — Scroll — FX13 Focus Pull
概要: 強いボケと淡い発色から一気にクリアへ
使用目的: 「思い出す」「見えてくる」の演出
適用シーン: 回想・沿革、ビフォー提示
使い方: 画像ブロックに fx-focus 直付け(グループにも可)

メリット: カメラ的で説明不要の直感性
デメリット: ボケ中は情報が読めない
バリエーション案: ボケ量=blur(16px)
実装時の注意点: reduced-motionではクリア表示

使い方: 画像ブロックに fx-focus 直付け(グループにも可)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX14 Depth Rise

fx-depth-tilt

Copy

Link

床から、起き上がる。

寝かせたセクションが遠近ごと立ち上がります。

パターン名: 遠近チルト — Scroll — FX14 Depth Rise
概要: 寝かせたセクション全体が遠近ごと起き上がる
使用目的: カード群や表組みの登場に立体感を
適用シーン: 料金表、メニュー一覧、特徴グリッド
使い方: グループに fx-depth-tilt

メリット: 中身はそのまま・親に1クラスで済む
デメリット: 長すぎるセクションは効果が薄い
バリエーション案: 角度17°/originの変更
実装時の注意点: reduced-motionでは通常表示

使い方: グループに fx-depth-tilt
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX15 Curtain Lift

fx-curtain-up

Copy

Link

幕が上がる。

一枚のパネルが上へ抜けて、舞台が始まります。

パターン名: 幕上げ — Scroll — FX15 Curtain Lift
概要: 一枚の色パネルが上へ抜けて中身が現れる
使用目的: 開幕感を最小の動きで
適用シーン: コンセプト文、営業案内の切替
使い方: グループに fx-curtain-up(–fx-curtain-cで色)

メリット: splitより静かで上質
デメリット: 縦に長いセクションは幕も長くなる
バリエーション案: 上抜き→下抜き派生も容易
実装時の注意点: reduced-motionではパネル非表示

使い方: グループに fx-curtain-up(--fx-curtain-cで色)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX16 Diagonal Slice

fx-slice

Copy

Link

パターン名: 斜め両断 — Scroll — FX16 Diagonal Slice
概要: 対角の三角パネルが割れて開き中身を見せる
使用目的: 鋭い動きでモダンに開示
適用シーン: キャンペーン、コレクション切替
使い方: グループに fx-slice(–fx-slice-cで色/中に画像等)

メリット: 斜めの動きは目を引く
デメリット: 落ち着いた業種には強すぎることも
バリエーション案: 割れる向きの反転派生
実装時の注意点: reduced-motionではパネル非表示

使い方: グループに fx-slice(--fx-slice-cで色/中に画像等)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX17 Zoom Stage

fx-zoom-stage

Copy

Link

寄って、語る。

背景がゆっくり寄る間に、言葉が浮かび上がる。

パターン名: ズームステージ — Scroll — FX17 Zoom Stage
概要: ピン留め中に背景が寄り、言葉が浮かぶ
使用目的: 1スクロールで没入→メッセージ提示
適用シーン: ブランドステートメント、ヒーロー直後
使い方: グループに fx-zoom-stage、中はカバーブロック1つ(文字はカバー内で編集)

メリット: カバーブロックなので画像も文字もUIで編集可
デメリット: 滑走路200vhぶん長くなる
バリエーション案: 寄り率1.45/文字の出るタイミング調整
実装時の注意点: 最終セクションに置かない

使い方: グループに fx-zoom-stage、中はカバーブロック1つ(文字はカバー内で編集)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX18 Reveal Bar

fx-reveal-bar

Copy

Link

走った跡に、言葉。

アクセントのバーが走り抜けた場所に見出しが置かれていきます。

パターン名: 走るバー — Scroll — FX18 Reveal Bar
概要: 色バーが横断し、通った跡に見出しが置かれる
使用目的: 見出しの「刻印感」を演出
適用シーン: 章見出し、キーメッセージ
使い方: 見出しブロックに fx-reveal-bar(–fx-bar-cで色)

メリット: 文字はそのまま編集可能
デメリット: 複数行見出しはバーが太くなる
バリエーション案: バー色/走査範囲の調整
実装時の注意点: reduced-motionではバー非表示・文字全表示

使い方: 見出しブロックに fx-reveal-bar(--fx-bar-cで色)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX19 Iris Offset

fx-iris-side

Copy

Link

パターン名: 丸窓オフセンター — Scroll — FX19 Iris Offset
概要: 円窓を左寄りに開き、構図に余白を残す
使用目的: 被写体が左右どちらかに寄った写真向け
適用シーン: 人物・商品のポートレート
使い方: グループに fx-iris-side(中に画像)

メリット: irisの構図バリエーション
デメリット: 被写体位置と円中心が合わないと不自然
バリエーション案: 中心座標(31% 50%)の変更
実装時の注意点: reduced-motionでは全表示

使い方: グループに fx-iris-side(中に画像)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX20 Bloom Panel

fx-bloom-sq

Copy

Link

パターン名: 角丸矩形→全面 — Scroll — FX20 Bloom Panel
概要: 角丸の矩形写真がピン留めのまま全幅へ育つ
使用目的: 円を経ない、落ち着いたbloom
適用シーン: 施設・空間紹介の見せ場
使い方: グループに fx-bloom-sq(中に画像1枚)

メリット: ビジネス寄りでも使える上品さ
デメリット: 滑走路230vhぶん長い
バリエーション案: 開始46%/角丸28pxの調整
実装時の注意点: 最終セクションに置かない

使い方: グループに fx-bloom-sq(中に画像1枚)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX21 Vertical Blinds

fx-blinds-v

Copy

Link

パターン名: 縦羽根ブラインド — Scroll — FX21 Vertical Blinds
概要: 縦の羽根が太りながら写真が全開
使用目的: blindsの縦回転版・建築的な印象
適用シーン: 外観・内装カット
使い方: 画像ブロックに fx-blinds-v 直付け

メリット: 横写真との相性が良い
デメリット: 細かい柄は羽根が見えにくい
バリエーション案: 羽根幅=11%
実装時の注意点: マスク非対応では全表示

使い方: 画像ブロックに fx-blinds-v 直付け
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX22 Vertical Split

fx-split-y

Copy

Link

上下から、ひらく。

天地のパネルが退き、静かに中身が現れます。

パターン名: 上下観音開き — Scroll — FX22 Vertical Split
概要: 天地のパネルが上下へ退き中身を見せる
使用目的: 横splitの縦版・帯状セクション向け
適用シーン: キャンペーン帯、告知帯
使い方: グループに fx-split-y(–fx-split-cで色)

メリット: 横長セクションで自然
デメリット: 開き終わるまで読めない
バリエーション案: 片側のみの派生も容易
実装時の注意点: reduced-motionではパネル非表示

使い方: グループに fx-split-y(--fx-split-cで色)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX23 Door Reveal

fx-split-solo

Copy

Link

パターン名: 片開きドア — Scroll — FX23 Door Reveal
概要: 一枚のパネルが横へスライドして退く
使用目的: 「扉が開く」メタファー
適用シーン: 店舗紹介、入店導線の演出
使い方: グループに fx-split-solo(中に画像等)

メリット: 動きがひとつで読みやすい
デメリット: 退く方向の先に余白が要る
バリエーション案: 左退き派生
実装時の注意点: reduced-motionではパネル非表示

使い方: グループに fx-split-solo(中に画像等)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX24 Twin Spotlight

fx-spot-duo

Copy

Link

二つの灯りが、交差する。

本灯と淡い照り返しが逆方向に走査します。

パターン名: 二灯スポット — Scroll — FX24 Twin Spotlight
概要: 本灯と淡い照り返しが逆方向に交差走査
使用目的: spotlightの豪華版・舞台感
適用シーン: ディナー帯、シアター風演出
使い方: グループに fx-spot-duo(暗背景推奨)

メリット: 交差の瞬間に視線が集まる
デメリット: 長文不向き
バリエーション案: 2灯の径・明るさ調整
実装時の注意点: reduced-motionでは暗幕ごと非表示

使い方: グループに fx-spot-duo(暗背景推奨)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX25 Sharp Skew

fx-skew-sharp

Copy

Link

鋭く、傾ける。

7%の鋭角が逆位相でスイングします。

パターン名: 鋭角スキュー — Scroll — FX25 Sharp Skew
概要: 7%の鋭角境界が逆位相で振れる
使用目的: skewの強調版・エッジの効いた帯
適用シーン: セール帯、若年向けキャンペーン
使い方: グループに fx-skew-sharp(背景色/グラデ推奨)

メリット: 動きの主張が強い
デメリット: 上下7%が常に切れる(余白必須)
バリエーション案: 角度の増減/静止版
実装時の注意点: 内側paddingを十分に

使い方: グループに fx-skew-sharp(背景色/グラデ推奨)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX26 Parallax Composition

parallax-live

Copy

Link

パターン名: パララックス実戦 — Scroll — FX26 Parallax Composition
概要: 視差背景+速度差2カラムを組んだ実戦例
使用目的: 既存クラスの掛け合わせ見本
適用シーン: ギャラリー、施設紹介
使い方: fx-parallax(グループ)+fx-tempo-slow/fastをカラムに

メリット: 新規CSS不要・既存だけで組める
デメリット: 画像点数が多いと重くなる
バリエーション案: カラム数・振幅の変更
実装時の注意点: tempoは同じ高さの列で揃えると綺麗

使い方: fx-parallax(グループ)+fx-tempo-slow/fastをカラムに
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX27 Pinned Reading

pin-read

Copy

Link

ここが留まり、

右の本文だけが流れていきます。

本文1 — 読み手の視線は左の見出しに戻れる。

本文2 — 長い説明でも迷子にならない。

本文3 — 読み物・沿革・工程の説明に。

パターン名: ピン留め読み物 — Scroll — FX27 Pinned Reading
概要: 左見出しが留まり右本文だけが流れる
使用目的: 長い説明の迷子防止
適用シーン: 沿革、工程説明、こだわり紹介
使い方: カラム左に fx-pin、右の各段落に fx-up

メリット: 既存クラスのみ・可読性が高い
デメリット: モバイルでは1列になりピンは効かせない設計
バリエーション案: 右本文の効果を差し替え可
実装時の注意点: 左カラムは短い内容に

使い方: カラム左に fx-pin、右の各段落に fx-up
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

Scroll — FX28 Horizontal Flow

hscroll-gallery

Copy

Link

パターン名: 横流れギャラリー — Scroll — FX28 Horizontal Flow
概要: 縦スクロールで横に流れる5枚ギャラリー
使用目的: 省スペースで多数の写真を見せる
適用シーン: 作品集、メニュー写真
使い方: fx-hscroll > fx-hscroll-view > fx-hscroll-track の3層(中に画像を並べる)

メリット: 既存クラスのみ・枚数可変
デメリット: 3層構造は初回だけ組む手間
バリエーション案: 枚数・カード幅の変更
実装時の注意点: trackの合計幅が画面幅を超えるように

使い方: fx-hscroll > fx-hscroll-view > fx-hscroll-track の3層(中に画像を並べる)
検証: isValid 0 / 目視シーク確認済み / fx.css v7.1

◈ Blanc Nail

Precision. Detail. Premium WordPress patterns. 全 41 カテゴリ・計 2870 パターンを isValid=0 保証で収録。

Foundations

ヒーロー
ヘッダー
フッター
ナビゲーション
タイポグラフィ

Content

フィーチャー
スタッツ
コールトゥアクション
レビュー / 推薦
チーム

Business

料金プラン
商品 / EC
アクセス / 営業時間
メニュー (飲食)
コンタクト

UI Components

カードレイアウト
モーダル / アコーディオン
タブ / セグメント
バナー / アラート
SNS

スクロール演出 · Scroll Animation · Blanc Nail

スクロール演出

スクロール演出

明確な目標

継続的な成長

滑らかな体験

層をなして降りてくる

スクロール ・ ズームリビール

観音開きの、その先へ。

暗がりに、光を通す。

SCROLL DESIGN

奥行きが、語る。

境界は、まっすぐでなくていい。

床から、起き上がる。

幕が上がる。

寄って、語る。

走った跡に、言葉。

上下から、ひらく。

二つの灯りが、交差する。

鋭く、傾ける。

ここが留まり、

スクロール・ズームリビール