open-index/open-npm huggingface dataset:
npm package: @sarap422/lib-hoverllin
Description: Hover-Triggered Animation Library
Author: sarap422
Latest version: 1.0.5

# Hoverllin v1.0.5

ホバー用アニメーションライブラリ

* class="hvr-~"： 付与だけのアニメーション処理。


## 必要ファイル

```
hoverllin.scss  （SCSS）または hoverllin.min.css（コンパイル済みCSS）
```


## 基本的な使い方

### 1. CDN

```html
<link rel="stylesheet" href="https://unpkg.com/@sarap422/lib-hoverllin@1.0.5/hoverllin.min.css">
```

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

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

これだけで、要素をホバー時に自動的にアニメーションが実行されます。


## 対応ブラウザ

モダンブラウザで動作します。

- Chrome 51+
- Firefox 55+
- Safari 12.1+
- Edge 15+
npm package: @sarap422/lib-scrollin
Description: Scroll-Triggered Animation Library (jQuery)
Author: sarap422
Latest version: 1.0.0

# 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

```html
<link rel="stylesheet" href="https://unpkg.com/@sarap422/lib-scrollin@1.0.0/scrollin.min.css">
<script src="https://unpkg.com/@sarap422/lib-scrollin@1.0.0/scrollin.min.js"></script>
```

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

```html
<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+