ocean-scroll-position-moitor
v1.0.1
Published
element entry animate class added when scroll into viewer
Downloads
5
Maintainers
Readme
ocean-scroll-position-moitor
The command line app for ocean-scroll-position-moitor
Installation
$ npm i ocean-scroll-position-moitor
Features
- element entry animate class added when scroll into viewer
- 当页面元素出现在视口中,给元素添加动画类,从而实现入场动画
Browser Support
Modern browsers and Internet Explorer 10+.
| IE / Edge | Firefox | Chrome | Safari | iOS Safari | Samsung | Opera | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | IE10, IE11, Edge| last 10 versions| last 10 versions| last 10 versions| last 5 versions| last 10 versions| last 10 versions
Notice
You can change activeClass config, but you shouldn't set this config to empty forever. Although I handle this empty situation.
Usage
$ ocean-scroll-position-moitor
## when you need to add uniform className for element
Usage:
new ScrollAnimate({
activeClass: "animated",
domSelector: ".j-zero-item"
});
## when some element need to add special active className, you can add data-active-class attribute on the special domElement
## such as this, the attribute rules is same as class rules
<div class="test-1 j-zero-item" data-active-class="bounceInLeft zero">
new ScrollAnimate({
activeClass: "animated",
domSelector: ".j-zero-item"
});
## so when this element scroll into viewer, this element will add bounceInLeft,zero,animated className to element
## like this
<div class="test-1 j-zero-item animated bounceInLeft zero" data-active-class="bounceInLeft zero">
!!!you should not set activeClass to empty!!!
like this
new ScrollAnimate({
activeClass: "",
domSelector: ".j-zero-item"
})