0.0.1 • Published 6 years ago
ds-scroll-effect v0.0.1
ds-scroll-effect ( Don't Need jQuery )
スクロールを起点とした、要素のアニメーションを実装します。
jQueryを必要ありません。
ライブラリ側ではclassを付け外しするだけで、アニメーションはcssでtransition、transformを用いて操作します。
- Target browser : IE11+
Install
npm i ds-scroll-effect -SImport
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
});