# ds-scroll-effect

Latest version **0.0.1** (published 2018-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install ds-scroll-effect
pnpm add ds-scroll-effect
yarn add ds-scroll-effect
bun add ds-scroll-effect
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2018-08-09 |
| First published | 2018-08-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Daiki Saito |
| Maintainers | dsflon |
| Keywords | scroll, js, library, ECMA script, not jQuery |

## Links

- npm: https://www.npmjs.com/package/ds-scroll-effect
- npm.io page: https://npm.io/package/ds-scroll-effect

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.0.1 (latest) — 2018-08-09
- 0.0.0 — 2018-08-07

## README

# ds-scroll-effect ( Don't Need jQuery )


スクロールを起点とした、要素のアニメーションを実装します。  
jQueryを必要ありません。  
ライブラリ側ではclassを付け外しするだけで、アニメーションはcssでtransition、transformを用いて操作します。

- Target browser : IE11+

___

# Install

```
npm i ds-scroll-effect -S
```

___

# Import

```
import DsScrollEffect from "ds-scroll-effect"
```

___

# Constructor

```
new DsScrollEffect(element [, option]);
```
|Argument|Data type|Default|Descroption|
|:-------|:--------|:------|:----------|
|element|String|-(Required)|対象要素を指定します。<br>ex) ".scroll-effect"|
option|Object|-|ex)<br>option = {<br>addClass: "active",<br>ajustVal: 100,<br>}|


|Option|Data type|Default|Descroption|
|:-------|:--------|:------|:----------|
|addClass|String|"start"|イベント発火時に付与されるclass名を指定します。<br>引数[element]で ".scroll-effect" を指定している場合、<br>デフォルトでは対象要素に class="scroll-effect_start" が付与されます。|
|ajustVal|Number|0|イベント発火位置を調整できます。<br>数値が大きいほど発火タイミングが遅くなります。|


___

# Demo

[https://dsflon.github.io/ds-scroll-effect/](https://dsflon.github.io/ds-scroll-effect/)

jScrollEffect を **".scroll-effect"** で実行している場合、  
イベント発火前にまず **".scroll-effect_transition**" が付与されます。  
css transition はこちらに設定してください。

".scroll-effect_transition" は **".scroll-effect_start**" 付与され、  
transition が終了すると削除されます。

```
import DsScrollEffect from "ds-scroll-effect"

new DsScrollEffect( ".scroll-effect", {
    ajustVal: 400
});
```

---
_Source: https://npm.io/package/ds-scroll-effect · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._