0.0.0 • Published 6 years ago
mgn-scroll-effect v0.0.0
mgn-scroll-effect ( Don't Need jQuery )
Implement element animation when start scrolling. On the library side, animation is operated with css using transition, transform just by adding and removing class.
- Target browser : IE11+
Install
npm i mgn-scroll-effect -SImport
import mgnScrollEffect from "mgn-scroll-effect"Constructor
new mgnScrollEffect(element [, option]);| Argument | Data type | Default | Descroption |
|---|---|---|---|
| element | String | -(Required) | Specify target element.ex) ".j-scroll-effect" |
| option | Object | - | ex)option = {addClass: "active",ajustVal: 100,} |
| Option | Data type | Default | Descroption |
|---|---|---|---|
| addClass | String | "start" | Specify assigned class name when igniting event.When ".j-scroll-effect" is specified in parameter element, class="j-scroll-effect_start"is assigned by default. |
| ajustVal | Number | 0 | Adjust event igniting position. The larger the value, the slower the ignition timing. |
Demo
https://frontend-isobar-jp.github.io/mgn-scroll-effect/
When execute mgnScrollEffect with ".j-scroll-effect",
".j-scroll-effect_transition" is assigned before the event is ignited.
Please do setting for css transition here.
".j-scroll-effect_transition" is deleted after ".j-scroll-effect_start" assigned transition is completed.
import mgnScrollEffect from "mgn-scroll-effect"
new mgnScrollEffect( ".j-scroll-effect", {
ajustVal: 400
});0.0.0
6 years ago