README
SCROLL EFFECT MODULE
Feature
Add effect according to scroll.
Demo
- Document -> https://yama-dev.github.io/js-scroll-effect-module/
- ExamplePage -> https://yama-dev.github.io/js-scroll-effect-module/examples/
- ExamplePage(Acceleration) -> https://yama-dev.github.io/js-scroll-effect-module/examples/
Installation,Download
npm -> https://www.npmjs.com/package/js-scroll-effect-module
Standalone(CDN) -> https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@v0.9.2/dist/js-scroll-effect-module.js
Using
NPM Usage
# install npm.
npm install --save-dev js-scroll-effect-module
// import.
import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module';
Basic Use
<link rel="stylesheet" href="./scroll-effect-module.css">
<script src="./js-scroll-effect-module.js"></script>
<div class="js-scroll js-scroll__fadein-basic"></div>
<script> new SCROLL_EFFECT_MODULE({ elem : '.js-scroll' }); </script>
Advanced Use
<link rel="stylesheet" href="./scroll-effect-module.css">
<script src="./js-scroll-effect-module.js"></script>
<div class="js-scroll"></div>
<script>
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
elem : '.js-scroll',
firstElem : '.js-scroll--first',
displayRatio : 0.8, // 判定する比率を指定(ウィンドウ高さを1として指定)
displayReverse : true, // スクロールを戻した時にクラスを削除するかどうか
firstDelay : 0, // 初回動作までの遅延時間(ms)
firstDelaySteps : 100, // 初回出現要素を指定した場合のステップ遅延時間(ms)
addClassNameActive : 'is-active', // null を設定するとクラスが付与されなくなる。
on: {
Scroll: function(top){
console.log('Scroll', top);
},
Change: function(item, pos){
console.log('Change', item, pos);
},
In: function(item, pos){
console.log('In', item, pos);
},
Out: function(item, pos){
console.log('Out', item, pos);
}
}
});
</script>
Advanced Use (Acceleration)
<script src="./js-scroll-effect-module.js"></script>
<script>
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
acceleration : true,
on: {
Acceleration: function(num){
console.log('Acceleration', num);
}
}
});
</script>
API
Browser support
Browser | OS、version |
---|---|
Internet Explorer | 11+ |
Chrome | 最新 |
Firefox | 最新 |
Safari | 最新 |
Android | 4.4+ Chrome |
iOS | 8.0+ safari |
Dependencies
For Developer
Contribution
- Fork it ( https://github.com/yama-dev/js-scroll-effect-module/fork )
- Create your feature branch (git checkout -b my-new-feature)
- Commit your changes (git commit -am 'Add some feature')
- Push to the branch (git push origin my-new-feature)
- Create new Pull Request