24
24
< body style ="overflow-x:hidden; ">
25
25
< div class ="container mt-4 ">
26
26
27
- < h2 class ="mb-3 "> SCROLL EFFECT MODULE v0.6.0 </ h2 >
27
+ < h2 class ="mb-3 "> SCROLL EFFECT MODULE v0.7.2 </ h2 >
28
28
29
29
< p > Add effect at scroll.</ p >
30
30
31
31
< span class ="p-sns "> < a class ="github-button " href ="https://github.com/yama-dev " data-show-count ="true " aria-label ="Follow @yama-dev on GitHub "> Follow @yama-dev</ a > </ span >
32
32
< span class ="p-sns "> < a class ="github-button " href ="https://github.com/yama-dev/js-scroll-effect-module/archive/master.zip " data-icon ="octicon-cloud-download " aria-label ="Download yama-dev/js-scroll-effect-module on GitHub "> Download</ a > </ span >
33
33
< span class ="p-sns "> < a class ="github-button " href ="https://github.com/yama-dev/js-scroll-effect-module " data-icon ="octicon-star " data-show-count ="true " aria-label ="Star yama-dev/js-scroll-effect-module on GitHub "> Star</ a > </ span >
34
34
< span class ="p-sns "> < a class ="github-button " href ="https://github.com/yama-dev/js-scroll-effect-module/fork " data-icon ="octicon-repo-forked " data-show-count ="true " aria-label ="Fork yama-dev/js-scroll-effect-module on GitHub "> Fork</ a > </ span >
35
- < span class ="p-sns "> < a href ="https://twitter.com/share?ref_src=twsrc%5Etfw " class ="twitter-share-button " data-text ="SCROLL EFFECT MODULE v0.6.0 Add effect at scroll. " data-show-count ="false "> Tweet</ a > </ span >
35
+ < span class ="p-sns "> < a href ="https://twitter.com/share?ref_src=twsrc%5Etfw " class ="twitter-share-button " data-text ="SCROLL EFFECT MODULE v0.7.2 Add effect at scroll. " data-show-count ="false "> Tweet</ a > </ span >
36
36
< style > .p-sns > span { display : inline-block; }</ style >
37
37
38
38
< hr class ="mt-4 mb-4 ">
@@ -64,26 +64,26 @@ <h3>Advanced Use</h3>
64
64
elem : '.js-scroll',
65
65
firstElem : '.js-scroll--first',
66
66
67
- displayRatio : 0.8, // 判定する比率を指定(ウィンドウ高さを1として指定)
68
- displayReverse : true, // スクロールを戻した時にクラスを削除するかどうか
67
+ displayRatio : 0.8,
68
+ displayReverse : true,
69
69
70
- firstDelay : 0, // 初回動作までの遅延時間(ms)
71
- firstDelaySteps : 100, // 初回出現要素を指定した場合のステップ遅延時間(ms)
70
+ firstDelay : 0,
71
+ firstDelaySteps : 100,
72
72
73
- addClassNameActive : 'is-active', // null を設定するとクラスが付与されなくなる。
73
+ addClassNameActive : 'is-active',
74
74
75
75
on: {
76
76
Scroll: function(top){
77
77
console.log('Scroll', top);
78
78
},
79
- Change: function(item, pos){
80
- console.log('Change', item, pos);
79
+ Change: function(item, pos, obj, top ){
80
+ console.log('Change', item, pos, obj, top );
81
81
},
82
- In: function(item, pos){
83
- console.log('In', item, pos);
82
+ In: function(item, pos, obj, top ){
83
+ console.log('In', item, pos, obj, top );
84
84
},
85
- Out: function(item, pos){
86
- console.log('Out', item, pos);
85
+ Out: function(item, pos, obj, top ){
86
+ console.log('Out', item, pos, obj, top );
87
87
}
88
88
}
89
89
});
@@ -108,15 +108,15 @@ <h3>Advanced Use</h3>
108
108
console . log ( 'Scroll' , top ) ;
109
109
document . querySelector ( '.dev .t1' ) . innerHTML = top ;
110
110
} ,
111
- Change : function ( item , pos ) {
112
- console . log ( 'Change' , item , pos ) ;
111
+ Change : function ( item , pos , obj , top ) {
112
+ console . log ( 'Change' , item , pos , obj , top ) ;
113
113
document . querySelector ( '.dev .t2' ) . innerHTML = pos ;
114
114
} ,
115
- In : function ( item , pos ) {
116
- console . log ( 'In' , item , pos ) ;
115
+ In : function ( item , pos , obj , top ) {
116
+ console . log ( 'In' , item , pos , obj , top ) ;
117
117
} ,
118
- Out : function ( item , pos ) {
119
- console . log ( 'Out' , item , pos ) ;
118
+ Out : function ( item , pos , obj , top ) {
119
+ console . log ( 'Out' , item , pos , obj , top ) ;
120
120
}
121
121
}
122
122
} ) ;
0 commit comments