見出し→本文→CTA の順出し
ヒーローの要素を、見出し・本文・CTA の順に 80ms ずつ遅らせて fade+rise で出す。読む順番と現れる順番を揃えると、視線が自然に CTA へ着地する。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 遅延は読む順（見出し→本文→CTA）。CTA を先に出すと視線が散り、最後に出すと自然に着地する
- 1 要素 500ms・間隔 80〜100ms。合計 1 秒を超えると「まだ出てくるのか」と待たされる
- rise は 12〜16px で十分。大きく動かすと要素がバラバラに見え、静止後の位置が読みにくい
- ページ内の全ブロックに使わない。最初の 1 画面だけの演出にし、スクロール後は即表示にする
コード（コピーして使えます）
<div class="pr-wrap">
<section class="pr-hero" id="prHero">
<p class="pr-eyebrow pr-el">請求書ソフト「ハルカ」</p>
<h2 class="pr-title pr-el">請求書づくりを、月 3 時間から 15 分に。</h2>
<p class="pr-text pr-el">納品データから自動で作成し、期日に送付。フリーランス 12,800 人が使っています。</p>
<div class="pr-actions pr-el">
<span class="pr-cta">無料で始める</span>
<span class="pr-sub">クレジットカード不要・いつでも解約できます</span>
</div>
</section>
<button class="pr-replay" id="prReplay" type="button">もう一度再生</button>
</div>