|
1 | 1 | # SCROLL EFFECT MODULE |
2 | 2 |
|
| 3 | +[](https://github.com/yama-dev/js-scroll-effect-module/releases/latest) |
| 4 | +[](https://github.com/yama-dev/js-scroll-effect-module/releases/latest) |
| 5 | +[](https://github.com/yama-dev/js-scroll-effect-module/releases/latest) |
| 6 | +[](https://github.com/yama-dev/js-scroll-effect-module/releases/latest) |
| 7 | +[](https://github.com/yama-dev/js-scroll-effect-module/blob/master/LICENSE) |
| 8 | + |
3 | 9 | <br> |
4 | 10 |
|
5 | 11 | ## Feature |
@@ -57,31 +63,52 @@ import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module'; |
57 | 63 | <link rel="stylesheet" href="./scroll-effect-module.css"> |
58 | 64 | <script src="./js-scroll-effect-module.js"></script> |
59 | 65 |
|
60 | | -<div class="js-scroll js-scroll__fadein-basic"></div> |
| 66 | +<div class="js-scroll"></div> |
| 67 | + |
| 68 | +<script> |
| 69 | + var ScrollEffectModule = new SCROLL_EFFECT_MODULE({ |
| 70 | + elem : '.js-scroll', |
| 71 | + firstElem : '.js-scroll--first', |
| 72 | +
|
| 73 | + displayRatio : 0.8, // 判定する比率を指定(ウィンドウ高さを1として指定) |
| 74 | + displayReverse : true, // スクロールを戻した時にクラスを削除するかどうか |
| 75 | +
|
| 76 | + firstDelay : 0, // 初回動作までの遅延時間(ms) |
| 77 | + firstDelaySteps : 100, // 初回出現要素を指定した場合のステップ遅延時間(ms) |
| 78 | +
|
| 79 | + addClassNameActive : 'is-active', // null を設定するとクラスが付与されなくなる。 |
| 80 | +
|
| 81 | + on: { |
| 82 | + Scroll: function(top){ |
| 83 | + console.log('Scroll', top); |
| 84 | + }, |
| 85 | + Change: function(item, pos){ |
| 86 | + console.log('Change', item, pos); |
| 87 | + }, |
| 88 | + In: function(item, pos){ |
| 89 | + console.log('In', item, pos); |
| 90 | + }, |
| 91 | + Out: function(item, pos){ |
| 92 | + console.log('Out', item, pos); |
| 93 | + } |
| 94 | + } |
| 95 | + }); |
| 96 | +</script> |
| 97 | +``` |
| 98 | + |
| 99 | +### Advanced Use (Acceleration) |
61 | 100 |
|
| 101 | +``` html |
| 102 | +<script src="./js-scroll-effect-module.js"></script> |
62 | 103 | <script> |
63 | | -var ScrollEffectModule = new SCROLL_EFFECT_MODULE({ |
64 | | - elem : '.js-scroll', |
65 | | - displayRatio : 0.8, |
66 | | - displayReverse : true, |
67 | | - firstElem : '.js-scroll--first', |
68 | | - firstElemDelayTime : 300, |
69 | | - firstDelayTime : 500, |
70 | | - loadDelayTime : 0, |
71 | | - addClassNameActive : 'is-active', |
72 | | - on: { |
73 | | - In: function(item, pos){ |
74 | | - console.log('In') |
75 | | - console.log(item); |
76 | | - console.log(pos); |
77 | | - }, |
78 | | - Out: function(item, pos){ |
79 | | - console.log('Out') |
80 | | - console.log(item); |
81 | | - console.log(pos); |
| 104 | + var ScrollEffectModule = new SCROLL_EFFECT_MODULE({ |
| 105 | + acceleration : true, |
| 106 | + on: { |
| 107 | + Acceleration: function(num){ |
| 108 | + console.log('Acceleration', num); |
| 109 | + } |
82 | 110 | } |
83 | | - } |
84 | | -}); |
| 111 | + }); |
85 | 112 | </script> |
86 | 113 | ``` |
87 | 114 |
|
|
0 commit comments