# Scrollin CSS/JS (fluffy fadein) v1.3.0
スクロール連動の「ふわっと表示」アニメーションライブラリです。
要素に `scroll-◯◯` クラスを付けるだけで、画面内に入ったときにアニメーションが実行されます。
**v1.3.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.3.0 のおもな変更点
* **バウンス系を追加**：`bounceIn` `bounceInBottom` `bounceInTop` `bounceInLeft` `bounceInRight`。行き過ぎて戻るオーバーシュート（ease-out-back）付きの入場アニメーションです（Textillin の bounce と同語彙）。
* **ふわふわ浮遊（無限ループ）を追加**：`floating`（上下）/ `swaying`（左右）。3秒周期・振幅 0.75rem のゆったり往復で、他の無限系と同じく画面外では自動停止します。
---
## v1.3.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
```html
```
> v1.3.0 から jQuery は不要です。サイトの他スクリプトが jQuery を使っている場合は、その読み込みはそのまま残してかまいません（本ライブラリ単体としては不要、という位置づけです）。
### 2. HTML に `scroll-エフェクト名` クラスを付与
```html
ふわっと下から表示されます
```
要素がスクロールで画面内に入ると、自動でアニメーションが実行されます。
---
## エフェクト一覧
クラス名は `scroll-` を付けて使用します（例：`scroll-fadeInBottom`）。
| 系統 | クラス（`scroll-` 省略） |
|------|--------------------------|
| フェード | `fadeIn` `fadeInBottom` `fadeInTop` `fadeInLeft` `fadeInRight` |
| バウンス | `bounceIn` `bounceInBottom` `bounceInTop` `bounceInLeft` `bounceInRight` |
| ブラー（イン） | `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` |
| ふわふわ浮遊（無限） | `floating`（上下） `swaying`（左右） |
| 回転（無限） | `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` / `floating` / `swaying`）では `slowed-N` が「1周（1往復）にかける秒数」になります。値を大きくするとゆっくり回りますが、`slowed` を上げても1フレームあたりの描画コストは変わらない点だけ留意してください。
---
## 特殊なエフェクトの使い方
### ループ／マーキー（looptation）
同一内容の **`.loop-list` を2つ**並べて置きます。JS が読み込み時に両者を `.scroll-inner` トラックへ自動で内包し、トラックを `-50%` 平行移動させて継ぎ目なくループさせます。
```html
```
* `ToFore` / `ToBack`：横スクロール（左／右）。
* `ToUp` / `ToDown`：縦スクロール（上／下）。縦は要素に高さ指定が必要です。
* `.loop-list` 1本ぶんがビューポートより小さいと境目に隙間が出ます。その場合は項目を増やすか、複製を増やしてください。
### カウントアップ（countation）
`data-count` に最終値を入れます。前後の文字・小数・ゼロ埋めを自動判定します。
```html
98
2.42
09
T-09
```
JS が無効でも、`data-count` の元値から表示を復旧できます。
### 円グラフ（chartation）
`.chartbar-thumb`（SVG）と `data-percent` を用いた塗り上がりアニメーションです。マークアップは付属のデモ（`demo-scrollin.html`）を参照してください。
### ふわふわ浮遊（floating / swaying）
その場でゆったり往復し続ける無限アニメーションです。`floating` が上下、`swaying` が左右。既定は3秒周期・振幅 0.75rem で、`slowed-N` を併記すると1往復 N 秒になります（例：`scroll-floating slowed-5` で5秒周期）。他の無限系と同様、画面外では一時停止し、`prefers-reduced-motion` では動きません。
```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.
