@@ -11,15 +11,15 @@ Add effect according to scroll.
11
11
## Demo
12
12
13
13
- Document -> [ https://yama-dev.github.io/js-scroll-effect-module/ ] ( https://yama-dev.github.io/js-scroll-effect-module/ )
14
- - SamplePage -> [ https://yama-dev.github.io/js-scroll-effect-module/sample / ] ( https://yama-dev.github.io/js-scroll-effect-module/sample / )
14
+ - ExamplePage -> [ https://yama-dev.github.io/js-scroll-effect-module/examples / ] ( https://yama-dev.github.io/js-scroll-effect-module/examples / )
15
15
16
16
<br >
17
17
18
18
## Installation,Download
19
19
20
20
- npm -> [ https://www.npmjs.com/package/js-scroll-effect-module ] ( https://www.npmjs.com/package/js-scroll-effect-module )
21
21
22
- - Standalone(CDN) -> [ https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@v0.1.4 /dist/js-scroll-effect-module.js ] ( https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@v0.1.4 /dist/js-scroll-effect-module.js )
22
+ - Standalone(CDN) -> [ https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@v0.2.0 /dist/js-scroll-effect-module.js ] ( https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module@v0.2.0 /dist/js-scroll-effect-module.js )
23
23
24
24
- Zip -> [ yama-dev/js-scroll-effect-module] ( https://github.com/yama-dev/js-scroll-effect-module/releases/latest )
25
25
@@ -39,12 +39,49 @@ npm install --save-dev js-scroll-effect-module
39
39
import SCROLL_EFFECT_MODULE from ' js-scroll-effect-module' ;
40
40
```
41
41
42
- ### Basic Standalone Usage
42
+ ### Basic Use
43
43
44
44
``` html
45
45
<link rel =" stylesheet" href =" ./scroll-effect-module.css" >
46
- <script src =" ./js-scroll-effect-module" ></script >
47
- <script > new SCROLL_EFFECT_MODULE ({ elem : ' .effect_item' }); </script >
46
+ <script src =" ./js-scroll-effect-module.js" ></script >
47
+
48
+ <div class =" js-scroll js-scroll__fadein-basic" ></div >
49
+
50
+ <script > new SCROLL_EFFECT_MODULE ({ elem : ' .js-scroll' }); </script >
51
+ ```
52
+
53
+ ### Advanced Use
54
+
55
+ ``` html
56
+ <link rel =" stylesheet" href =" ./scroll-effect-module.css" >
57
+ <script src =" ./js-scroll-effect-module.js" ></script >
58
+
59
+ <div class =" js-scroll js-scroll__fadein-basic" ></div >
60
+
61
+ <script >
62
+ var ScrollEffectModule = new SCROLL_EFFECT_MODULE ({
63
+ elem : ' .js-scroll' ,
64
+ displayRatio : 0.8 ,
65
+ displayReverse : true ,
66
+ firstElem : ' .js-scroll--first' ,
67
+ firstElemDelayTime : 300 ,
68
+ firstDelayTime : 500 ,
69
+ loadDelayTime : 0 ,
70
+ addClassNameActive : ' is-active' ,
71
+ on: {
72
+ In : function (item , pos ){
73
+ console .log (' In' )
74
+ console .log (item);
75
+ console .log (pos);
76
+ },
77
+ Out : function (item , pos ){
78
+ console .log (' Out' )
79
+ console .log (item);
80
+ console .log (pos);
81
+ }
82
+ }
83
+ });
84
+ </script >
48
85
```
49
86
50
87
<br >
@@ -69,7 +106,7 @@ import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module';
69
106
70
107
## Dependencies
71
108
72
- none
109
+ [ @ yama-dev/js-dom ] ( https://github.com/yama-dev/js-dom )
73
110
74
111
<br ><br ><br >
75
112
0 commit comments