Scrollin CSS/JS (fluffy fadein) v1.2.0

スクロール連動の「ふわっと表示」アニメーションライブラリです。 要素に scroll-◯◯ クラスを付けるだけで、画面内に入ったときにアニメーションが実行されます。

v1.2.0 は依存ゼロの Vanilla JS になりました（jQuery 不要）。

• class="scroll-◯◯" を付与するだけで動作（個別のJS記述は不要）。
• delayed-0〜6：開始遅延クラス（animation-delay）。
• fasted-1〜3 / slowed-1〜180：再生速度クラス（animation-duration）。
• Intersection Observer 方式（scrollTop 監視ではなく交差判定）。読み込み直後にコンテンツが消える問題が無く、スクロール中のJS負荷もほぼゼロ。
• 調整用クラス（delayed / fasted / slowed）のセレクタ生成にのみ SCSS を使用。

v1.2.0 のおもな変更点

• jQuery 依存を撤廃（Vanilla JS 化）。DOMContentLoaded / IntersectionObserver / wrapInner 相当の処理をすべて標準APIで実装。
• ラッパー注入を廃止（wrapper-free）。以前は各要素を .scroll-wrapper で包んでいましたが、CSS側で要素自身・擬似要素に直接アニメーションを当てる方式に変更。DOM がシンプルになり、width:100% や 親 > 子 セレクタも崩れません。唯一 looptation（マーキー）だけは複製2本を .scroll-inner トラックに内包します。
• transition を全廃し animation に統一（タイミングは animation-delay / animation-duration のみ）。
• 無限アニメは画面内のときだけ再生。rotation / clockation / looptation / .infinited は、画面外にスクロールアウトすると一時停止し、合成（コンポジット）の無駄を抑えます。
• prefers-reduced-motion 対応。動きを減らす設定では、全エフェクトを最終表示状態で静止させます。
• 印刷対応。@media print で、スクロールせずとも全要素を最終表示状態で出力します。

必要ファイル

scrollin.js     （JavaScript／Vanilla・jQuery不要）
scrollin.scss   （SCSS）または scrollin.min.css（コンパイル済みCSS）

導入

1. CDN

<link rel="stylesheet" href="https://unpkg.com/@sarap422/[email protected]/scrollin.min.css">
<script src="https://unpkg.com/@sarap422/[email protected]/scrollin.min.js"></script>

v1.2.0 から jQuery は不要です。サイトの他スクリプトが jQuery を使っている場合は、その読み込みはそのまま残してかまいません（本ライブラリ単体としては不要、という位置づけです）。

2. HTML に scroll-エフェクト名 クラスを付与

<strong class="scroll-fadeInBottom">
  <span>ふわっと下から表示されます</span>
</strong>

要素がスクロールで画面内に入ると、自動でアニメーションが実行されます。

エフェクト一覧

クラス名は scroll- を付けて使用します（例：scroll-fadeInBottom）。

| 系統 | クラス（scroll- 省略） | |------|--------------------------| | フェード | fadeIn fadeInBottom fadeInTop fadeInLeft fadeInRight | | ブラー（イン） | blurIn blurInBottom blurInTop blurInLeft blurInRight | | ブラー（アウト） | blurFadeOut blurOutTop blurOutBottom blurOutLeft blurOutRight | | backdrop ブラー | bdfBlurIn | | 背景色 | bgFadeIn bgInBottom bgInLeft bgOpenIn | | 移動 | moveInBottom moveInDown moveInLeft moveInRight | | 拡大・縮小 | growIn growOut shrinkIn shrinkOut | | ワイプ | wipeInCentral wipeInBottom wipeInTop wipeInLeft wipeInRight | | クリップ | clipInBottom clipInLeft clipInRight clipInBottomLeft clipInBottomRight | | 幕（入場＋退場） | coatInBottom coatInLeft coatInRight coatInBottomOut coatInLeftOut coatInRightOut coatInBottomLeftOut coatInBottomRightOut | | 幕（退場のみ） | coatFadeOut coatOutTop coatOutBottom coatOutLeft coatOutRight | | グラデーションマスク | mirageInBottom mirageInTop mirageInRight mirageInLeft | | 3Dフリップ | flipInXDown flipInXUp flipInYFore flipInYBack | | 回転（無限） | rotationDext rotationLevo | | 時計の針（無限） | clockationDext clockationLevo | | 円グラフ | chartation | | カウントアップ | countation | | ループ／マーキー（無限） | looptationToUp looptationToDown looptationToFore looptationToBack |

タイミング修飾クラス

scroll-◯◯ と同じ要素に併記して、開始遅延や再生時間を調整します（例：class="scroll-fadeInBottom slowed-2 delayed-1"）。

ディレイ（delayed）— animation-delay

| クラス | 遅延 | |--------|------| | delayed-0 | 0s | | delayed-1 | 0.25s | | delayed-2 | 0.5s | | delayed-3 | 0.75s | | delayed-4 | 1s | | delayed-5 | 1.25s | | delayed-6 | 1.5s |

高速化（fasted）— animation-duration

| クラス | 再生時間 | |--------|----------| | fasted-1 | 0.75s | | fasted-2 | 0.5s | | fasted-3 | 0.25s |

低速化（slowed）— animation-duration

| クラス | 再生時間 | |--------|----------| | slowed-1 | 1.5s | | slowed-2 | 2s | | slowed-3 | 3s | | slowed-4 | 4s | | slowed-5 | 5s | | slowed-10 | 10s | | slowed-20 | 20s | | slowed-30 | 30s | | slowed-60 | 60s | | slowed-90 | 90s | | slowed-120 | 120s | | slowed-180 | 180s |

無限系（rotation / clockation / looptation）では slowed-N が「1周にかける秒数」になります。値を大きくするとゆっくり回りますが、slowed を上げても1フレームあたりの描画コストは変わらない点だけ留意してください。

特殊なエフェクトの使い方

ループ／マーキー（looptation）

同一内容の .loop-list を2つ並べて置きます。JS が読み込み時に両者を .scroll-inner トラックへ自動で内包し、トラックを -50% 平行移動させて継ぎ目なくループさせます。

<div class="scroll-looptationToFore slowed-60">
  <ul class="loop-list"><li><img src="a.jpg"></li><li><img src="b.jpg"></li></ul>
  <ul class="loop-list"><li><img src="a.jpg"></li><li><img src="b.jpg"></li></ul>
</div>

• ToFore / ToBack：横スクロール（左／右）。
• ToUp / ToDown：縦スクロール（上／下）。縦は要素に高さ指定が必要です。
• .loop-list 1本ぶんがビューポートより小さいと境目に隙間が出ます。その場合は項目を増やすか、複製を増やしてください。

カウントアップ（countation）

data-count に最終値を入れます。前後の文字・小数・ゼロ埋めを自動判定します。

<span class="scroll-countation" data-count="98">98</span>      <!-- 0 → 98 -->
<span class="scroll-countation" data-count="2.42">2.42</span>  <!-- 小数2桁を維持 -->
<span class="scroll-countation" data-count="09">09</span>      <!-- 2桁ゼロ埋め -->
<span class="scroll-countation" data-count="T-09">T-09</span>  <!-- 接頭辞付き -->

JS が無効でも、data-count の元値から表示を復旧できます。

円グラフ（chartation）

.chartbar-thumb（SVG）と data-percent を用いた塗り上がりアニメーションです。マークアップは付属のデモ（demo-scrollin.html）を参照してください。

無限化（.infinited）

任意の scroll-◯◯ に .infinited を併記すると、そのアニメーションが無限ループになります（画面内のときだけ再生）。

アクセシビリティ / 印刷

• prefers-reduced-motion: reduce：動きを抑える設定の利用者には、全エフェクトを最終表示状態で静止表示します（重い filter / backdrop-filter ブラーも実行しません）。
• 印刷時：スクロールしていない要素も含め、全エフェクトを最終表示状態で出力します。

パフォーマンス・メモ

• 移動・表示の大半は transform / opacity（合成のみ）で、レイアウトを誘発するプロパティはアニメーションしていません。
• 重いのは blurIn / blurOut / bdfBlurIn の ブラー系だけです（とくに backdrop-filter は高負荷）。一度きりの発火ですが、低スペック端末では大きな要素・多用で一瞬カクつくことがあるため、ファーストビューや多重使用は控えめにするのがおすすめです。
• 無限系（回転・時計・ループ）は画面外で自動停止します。

対応ブラウザ

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

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

ライセンス

Released under the MIT license.