JavaScript確認用ページ

このページは「このサイトにどんなJavaScriptが入っているか」を、挙動＋HTMLサンプルで確認するためのマニュアル用ページです。
※各ブロックは data-module / data-component を付けて起動しています。

注釈（つまずきポイント）

  • 多くの機能は「自動で全ページに発火」ではなく、data-module / data-component を付けた場所だけ動きます。
  • 動かない場合は、(1) このページがキャッシュされていないか、(2) HTMLの data 属性の綴りが合っているか、(3) CSS（演出用）が読み込まれているか、を確認してください。
  • スムーススクロールは opt-in（data-smooth-scroll を付けたリンクのみ）です。

1) テキスト演出：data-text-effect（20種） / data-typewriter（Typewriter）

data-text-effect（例）

01 fade-up（chars / default）

02 fade（chars）

03 slide-left（chars）

04 slide-right（chars）

05 slide-down（chars）

06 zoom-in（chars）

07 zoom-out（chars）

08 blur（chars）

09 rotate（chars）

10 flip（chars）

11 skew（chars）

12 clip-up（chars）

13 clip-left（chars）

14 tracking（letter-spacing）

15 underline（draw）

16 marker（highlight）

17 wave（chars）

18 bounce（chars）

19 glitch（container）

20 shine（container）

Words split demo: The quick brown fox jumps over the lazy dog

HTMLサンプル

<!-- テキスト演出 -->
<h2
  data-text-effect="fade-up"
  data-text-split="chars"
  data-text-once="false"
  data-text-delay="0"
  data-text-duration="600"
  data-text-stagger="24"
>
  タイトル
</h2>

<!-- words split はスペース区切り前提（日本語は基本 chars 推奨） -->
<h3 data-text-effect="fade-up" data-text-split="words" data-text-once="false">
  The quick brown fox...
</h3>

Typewriter（3例）

Typewriter 01（即開始 / 再実行OK）：スクロール確認用

Typewriter 02（inview=default true） 2行目：\n は
に変換

Typewriter 03：カーソル付き（cursor="|"） 

<!-- Typewriter -->
<p
  data-typewriter
  data-typewriter-inview="true"
  data-typewriter-once="false"
  data-typewriter-speed="40"
  data-typewriter-delay="0"
  data-typewriter-cursor="|"
  data-typewriter-br="true"
>
  文章...\n改行...
</p>

注意：Typewriter は HTML を含む文（強調タグなど）を入れると崩れる可能性があるので、基本は「テキストだけ」を推奨です。

2) スムーススクロール：data-smooth-scroll（opt-in）

次の「Scroll Reveal」へスムーススクロール （data-smooth-scroll を付けたリンクのみ対象） 

<a href="#sec-reveal" data-smooth-scroll>…</a>

注意：オフセットは <html data-scroll-offset="72"> のように html 属性で調整されます（ヘッダーJSが更新する想定）。

3) Scroll Reveal：data-reveal / data-reveal-effect

data-reveal + fade-up
data-reveal + clip-up
data-reveal + zoom-in 
<!-- ScrollReveal -->
<section data-module="scrollReveal">
  <div data-reveal data-reveal-effect="fade-up" data-reveal-once="false">...</div>
  <div data-reveal data-reveal-effect="clip-up" data-reveal-once="false">...</div>
</section>

4) Marquee（横ループ）：data-module="marquee"

画像でもテキストでもOK。ここではサンプル画像で確認します。

sample sample sample sample 
<!-- Marquee -->
<section data-module="marquee">
  <div data-marquee data-marquee-speed="80" data-marquee-gap="18">
    <div data-marquee-track>...（画像やテキストの並び）...</div>
  </div>
</section>
注： data-marquee-track が無い場合は内部で推測しますが、基本は track を明示した方が事故りにくいです。

4) Stagger：data-stagger / data-stagger-item

item 01
item 02
item 03
item 04
item 05
<!-- Stagger -->
<div data-stagger data-stagger-effect="fade-up">
  <div data-stagger-item>...</div>
  <div data-stagger-item>...</div>
</div>

5) InView：data-inview（任意class付与）

data-inview（class: is-inview）

<!-- InView -->
<div
  data-inview
  data-inview-class="is-inview"
  data-inview-once="false"
  data-inview-ratio="0.2"
  data-inview-margin="0px 0px -10% 0px"
>
  ...
</div>

注意：InView は「CSSと組み合わせて使う」用途です（classが付いた後の見た目はCSS側で決まります）。

6) Lazy Image：data-lazy（遅延読み込み）

下の画像は data-lazy で遅延読み込みされます。

Lazy sample 
<!-- LazyImage -->
<img
  data-lazy
  data-lazy-srcset="画像URL 1200w"
  data-lazy-sizes="(max-width: 768px) 90vw, 600px"
  alt=""
>

注意：実運用は src を空にし、data-lazy-srcset 側に本体を入れる想定です（このページでは見た目確認のため簡略化しています）。

7) Media Reveal：data-media-reveal / data-media-effect

Media reveal sample 
<!-- MediaReveal -->
<figure data-media-reveal data-media-effect="clip-up" data-media-once="false">
  <img src="..." alt="">
</figure>

注意：MediaReveal は CSS 演出が主役です（JSは inview 付与の役）。

8) CountUp：data-count（数値カウント）

スクロールで表示されたらカウント開始（once=false）

0

0 

<!-- CountUp -->
<p
  data-count="1280"
  data-count-prefix=""
  data-count-suffix=" px"
  data-count-once="false"
>
  0
</p>

注意：初期テキストは「0」推奨。小数もOKですが、表示桁の扱いはCSS/運用で合わせるのが安全です。

9) Scroll Progress：data-scroll-progress（ページ進捗）

<!-- Scroll Progress -->
<div data-scroll-progress data-scroll-progress-aria="true"></div>

10) Page Top：data-page-top（トップへ戻る）

ページ右下にボタンが出ます（表示条件はスクロール量）。

<!-- PageTop -->
<button data-page-top>↑ TOP</button>

11) Hero Slider：data-module="heroSlider"

<!-- Hero Slider -->
<div data-module="heroSlider">
  <div class="p-hero__slide is-active"><img src="..."></div>
  <div class="p-hero__slide"><img src="..."></div>
</div>

注意：スライドは .p-hero__slide を前提にしています。1枚だけだと何も起きません。

12) Accordion：data-component="accordion"

<!-- Accordion -->
<section data-component="accordion">
  <div data-acc-multiple="false">
    <button data-acc-trigger>...</button>
    <div data-acc-panel hidden>...</div>
  </div>
</section>

13) Tabs：data-component="tabs"

内容A
<!-- Tabs -->
<section data-component="tabs">
  <div data-tab-list>
    <button data-tab data-tab-target="#tabA">A</button>
  </div>
  <div id="tabA" data-tab-panel>...</div>
</section>

14) Modal：data-component="modal"

モーダルを開くトリガー要素（button/a）に data-component を付けます。

<!-- Modal -->
<button data-component="modal" data-modal-target="#myModal">Open</button>

<div id="myModal" data-modal-inner hidden>
  <div data-modal-backdrop></div>
  <button data-modal-close>Close</button>
</div>
注： data-component="modal" を section などに付けても動きません。トリガー要素に付けてください。

15) Drawer：data-component="drawer"

aria-controls（＝Drawerのid）と aria-expanded の紐付けが前提です。

<!-- Drawer -->
<button data-component="drawer" aria-controls="drawerId" aria-expanded="false">Open</button>

<div id="drawerId" class="c-drawer" aria-hidden="true">
  <div class="c-drawer__backdrop" data-drawer-close></div>
  <div class="c-drawer__panel">
    <button data-drawer-close>Close</button>
  </div>
</div>
注： Drawer は aria-controls / aria-expanded の紐付けが前提です（ボタンとドロワーIDが一致している必要あり）。

16) Loading：data-loading（ページロード演出）

注意：Loading は main.js が最優先で検出し、[data-loading] があるページだけ動的 import します。
この確認ページにも入れられますが、実運用では「トップのみ」などに絞る方が安全です。 

<!-- Loading（例：ページ内のどこかに置く） -->
<div
  data-loading
  data-loading-mode="auto"
  data-loading-wait="0"
  data-loading-lock-scroll="true"
>
  ...
</div>