Scrollin

スクロール連動ふわっとフェードインライブラリ（要jQuary）

• class="scroll-~"： 付与だけのアニメーション処理。
• delayed-0~6： 開始遅延クラス（delay）
• fasted-1~3, slowed-1~120：アニメーション速度クラス（duration）
• Intersection Observer化（scrollTopでなく交差点基準による、Load時はコンテンツが表示されない問題の排除、及びJS処理の軽減化）。
• 現状要jQuary。
• 調整用のクラス（delayed, fasted, slowed）のセレクタまとめ用に一部SCSS使用。

必要ファイル

scrollin.js    （JavaScript）
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>

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

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

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

CSS タイミング修飾クラス

is-scloaded クラスと組み合わせて使用するタイミング制御クラスです。 通常は自動付与されますが、独自のスタイルで利用する場合に参照してください。

ディレイ（delayed）

| クラス | 遅延時間 | |--------|----------| | 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）

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

低速化（slowed）

| クラス | 再生時間 | |--------|----------| | 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 |

対応ブラウザ

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

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