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)|対象要素を指定します。ex) ".scroll-effect"| option|Object|-|ex)option = {addClass: "active",ajustVal: 100,}|

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

Demo

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
});