Scrollin とは

scroll-fadeIn などのクラスを付けておくだけで、要素がスクロールでビューポートに入ったタイミングで自動的にアニメーションする、スクロールトリガーアニメーションライブラリです。

特徴：

• Vanilla JS — jQuery不要
• IntersectionObserver API — スクロールイベントの監視ではなくネイティブAPIを使用。パフォーマンスが良い
• transition ベース — フェードイン等の一度きりのアニメーションは CSS transition で実装。コードがシンプルで、FireShot問題が発生しない
• [unscrollin] 属性 — 特定のセクション内でアニメーションを無効化できる
• .delayed-* / .fasted-* / .slowed-* でタイミング調整可能

基本的な使い方

1. ファイルを読み込む

<link rel="stylesheet" href="scrollin.css">
<script src="scrollin.js"></script>

2. アニメーションさせたい要素にクラスを付ける

<p class="scroll-fadeIn">
  スクロールでフェードインします
</p>

<img class="scroll-blurInBottom" src="image.jpg" alt="" />

これだけで、要素がビューポートに入った瞬間にアニメーションが実行されます。一度きりで、スクロールアウト後は再実行されません。

利用可能なエフェクト一覧

フェードイン系

ブラーイン系

背景色系（::before を使用）

移動・スケール系

クリップイン系

ワイプイン系

幕系（::after を使用）

グラデーションマスク系

フリップイン系（3D）

ループ系（animation-iteration-count: infinite）

特殊系

タイミング調整クラス

ディレイ（.delayed-*）

アニメーションの開始を遅らせます。

<!-- 0.5秒遅れてフェードイン -->
<p class="scroll-fadeIn delayed-2">テキスト</p>

速度調整（.fasted-* / .slowed-*）

<!-- ゆっくり（3秒）フェードイン -->
<p class="scroll-fadeIn slowed-3">テキスト</p>

<!-- 速く（0.5秒）フェードイン -->
<p class="scroll-blurIn fasted-2">テキスト</p>

fasted-1（0.75s）〜 fasted-3（0.25s）、slowed-1（1.5s）〜 slowed-180（180s）が利用可能。

アニメーションを無効化する（[unscrollin]）

祖先要素に unscrollin 属性を付けると、その配下のアニメーションを無効化できます。

<!-- このセクション内のアニメーションはすべて無効 -->
<section unscrollin>
  <p class="scroll-fadeIn">アニメーションせず即表示される</p>
</section>

プリント用ページや、アクセシビリティ対応が必要な箇所に使います。

カウントアップ（scroll-countation）

数値をカウントアップするアニメーションです。

<span class="scroll-countation" data-count="1,234">1,234</span>
<span class="scroll-countation slowed-2" data-count="98.6%">98.6%</span>
<span class="scroll-countation" data-count="007">007</span>

data-count 属性に目標値を書くと、スクロール時に0から数値がカウントアップされます。プレフィックス・サフィックス・小数点・ゼロパディングも自動判定します。

円グラフアニメーション（scroll-chartation）

SVGの stroke-dasharray を使って、円グラフが描かれるアニメーションです。

<div class="chart-donut scroll-chartation" data-percent="75">
  <div class="chart-wrapper">
    <svg viewBox="0 0 200 200">
      <circle r="80" cx="100" cy="100" />
      <circle id="thumb1" class="chartbar-thumb" r="80" cx="100" cy="100" />
    </svg>
    <div class="chart-central">
      <p><b>75</b><small>%</small></p>
    </div>
  </div>
</div>

data-percent に0〜100の数値を指定すると、その割合まで円弧が描かれます。

実装の仕組み

1. ページ読み込み時に scroll-* クラスを持つ要素を検出し、IntersectionObserver に登録
2. 要素がビューポートに入ると is-scloaded クラスが付与される
3. transition ベースのエフェクトは、is-scloaded で最終状態のCSSが適用されてアニメーションが発火
4. ループ系以外は一度きりで監視が解除される（メモリ効率化）
5. ループ系（rotation / looptation）は画面外に出ると animation-play-state: paused で一時停止

prefers-reduced-motion 対応

@media (prefers-reduced-motion: reduce) が設定されている場合、主要なアニメーション・トランジションが無効になり、要素は最終表示状態で即時表示されます。

対応ブラウザ

IntersectionObserver API に対応したモダンブラウザで動作します。

• Chrome 51+
• Firefox 55+
• Safari 12.1+
• Edge 15+