Skip to content

Commit 65f5f04

Browse files
yama-devyama-dev
authored
Merge pull request #25 from yama-dev/v0.13.3
V0.13.3
2 parents f2a9e5a + 74ecf68 commit 65f5f04

File tree

8 files changed

+203
-242
lines changed

8 files changed

+203
-242
lines changed

‎.env

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
SLUG=js-scroll-effect-module
2-
VERSION=0.13.2
2+
VERSION=0.13.3

‎README.md

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,17 @@ import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module';
4646
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module/examples/scroll-effect-module.css">
4747
<script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module/dist/js-scroll-effect-module.js"></script>
4848

49-
<div data-scroll data-scroll-name="name-1"></div>
49+
<div data-scroll></div>
5050

51-
<div data-scroll data-scroll-name="name-2"></div>
51+
<div data-scroll></div>
52+
53+
<script>
54+
new SCROLL_EFFECT_MODULE({
55+
target: '[data-scroll]',
56+
ratio : 0.8, // 判定する比率を指定（ウィンドウ高さを1として指定）
57+
reverse: true, // スクロールを戻した時にクラスを削除するかどうか
58+
});
59+
</script>
5260
```
5361

5462
### Advanced Use
@@ -65,17 +73,18 @@ const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
6573
target : '[data-scroll]',
6674
classNameInview : 'is-active',
6775
68-
displayRatio : 0.8, // 判定する比率を指定（ウィンドウ高さを1として指定）
69-
displayReverse : false, // スクロールを戻した時にクラスを削除するかどうか
70-
displayRatioReverse: null,
76+
ratio : 0.8, // 判定する比率を指定（ウィンドウ高さを1として指定）
77+
reverse : false, // スクロールを戻した時にクラスを削除するかどうか
7178
72-
firstDelay : 100, // 初回動作までの遅延時間（ms）
79+
ratioReverse : null, // 戻る際の判定比率を指定（ウィンドウ高さを1として指定）
7380
74-
throttleInterval : 5,
81+
firstDelay : 100, // 初回動作までの遅延時間（ms）
7582
76-
autoStart : true,
83+
autoStart : true, // 自動でスタートするかどうか
7784
autoStartType : 'ready', // ready, load, scroll
7885
86+
throttleInterval : 5,
87+
7988
on: {
8089
Change: function(obj, index, name){
8190
console.log('Change', obj, index, name);

‎dist/js-scroll-effect-module.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/index.html

Lines changed: 82 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -39,68 +39,94 @@ <h2 class="mb-3">SCROLL EFFECT MODULE</h2>
3939

4040
<div class="p-use" data-scroll>
4141
<h3>Basic Use</h3>
42-
<pre class="prettyprint lang-html">
43-
<code>
44-
&lt;div data-scroll&gt;&lt;/div&gt;
45-
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
46-
&lt;script&gt; new SCROLL_EFFECT_MODULE({ target: &#039;[data-scroll]&#039; }); &lt;/script&gt;</code>
47-
</pre>
48-
<pre class="prettyprint lang-html">
49-
<code>
50-
// 予め容易されているアニメーションを利用する場合
51-
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
52-
&lt;div data-scroll data-scroll-type=&quot;fadein&quot;&gt;&lt;/div&gt;</code>
53-
</pre>
42+
<details>
43+
<summary>HTML</summary>
44+
<pre class="prettyprint lang-html"><code>
45+
&lt;div data-scroll&gt;&lt;/div&gt;
46+
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
47+
&lt;script&gt; new SCROLL_EFFECT_MODULE({ target: &#039;[data-scroll]&#039; }); &lt;/script&gt;
48+
</code></pre>
49+
<pre class="prettyprint lang-html"><code>
50+
// with default css
51+
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
52+
&lt;div data-scroll data-scroll-type=&quot;fadein&quot;&gt;&lt;/div&gt;
53+
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
54+
&lt;script&gt; new SCROLL_EFFECT_MODULE({ target: &#039;[data-scroll]&#039; }); &lt;/script&gt;
55+
</code></pre>
56+
</details>
5457
</div>
5558

5659
<hr class="mt-4 mb-4" data-scroll>
5760

5861
<div class="p-use" data-scroll>
5962
<h3>Advanced Use</h3>
60-
<pre class="prettyprint lang-html">
61-
<code>
62-
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
63-
&lt;div data-scroll data-scroll-name=&quot;first&quot;&gt;&lt;/div&gt;
64-
&lt;div data-scroll data-scroll-name=&quot;second&quot;&gt;&lt;/div&gt;
65-
&lt;div data-scroll data-scroll-name=&quot;third&quot;&gt;&lt;/div&gt;
66-
67-
&lt;script&gt;
68-
const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
69-
target: &#39;[data-scroll]&#39;,
70-
classNameInview : &#39;is-active&#39;,
71-
displayRatio : 0.8,
72-
displayReverse : true,
73-
displayRatioReverse: null,
74-
throttleInterval : 3,
75-
autoStart : true,
76-
on: {
77-
Change: function(obj, index, name){
78-
console.log(&#39;Change&#39;, obj, index, name);
79-
},
80-
In: function(obj, index, name){
81-
console.log(&#39;In&#39;, obj, index, name);
82-
},
83-
Out: function(obj, index, name){
84-
console.log(&#39;Out&#39;, obj, index, name);
85-
},
86-
Scroll: function(top){
87-
console.log(&#39;Scroll&#39;, top);
88-
}
89-
}
90-
});
91-
&lt;/script&gt;</code>
92-
</pre>
63+
<details>
64+
<summary>HTML</summary>
65+
<pre class="prettyprint lang-html"><code>
66+
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
67+
&lt;div data-scroll data-scroll-name=&quot;first&quot;&gt;&lt;/div&gt;
68+
&lt;div data-scroll data-scroll-name=&quot;second&quot;&gt;&lt;/div&gt;
69+
&lt;div data-scroll data-scroll-name=&quot;third&quot;&gt;&lt;/div&gt;
70+
71+
&lt;script&gt;
72+
const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
73+
target : &#39;[data-scroll]&#39;,
74+
classNameInview: &#39;is-active&#39;,
75+
ratio : 0.8,
76+
ratioReverse : null,
77+
reverse : true,
78+
autoStart : true,
79+
});
80+
&lt;/script&gt;
81+
</code></pre>
82+
</details>
83+
</div>
84+
85+
<hr class="mt-4 mb-4" data-scroll>
86+
87+
<div class="p-use" data-scroll>
88+
<h3>Advanced Use (callback)</h3>
89+
<details>
90+
<summary>HTML</summary>
91+
<pre class="prettyprint lang-html"><code>
92+
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
93+
&lt;div data-scroll data-scroll-name=&quot;first&quot;&gt;&lt;/div&gt;
94+
&lt;div data-scroll data-scroll-name=&quot;second&quot;&gt;&lt;/div&gt;
95+
&lt;div data-scroll data-scroll-name=&quot;third&quot;&gt;&lt;/div&gt;
96+
97+
&lt;script&gt;
98+
const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
99+
target : &#39;[data-scroll]&#39;,
100+
ratio : 0.8,
101+
reverse : true,
102+
on: {
103+
Change: function(obj, index, name){
104+
console.log(&#39;Change&#39;, obj, index, name);
105+
},
106+
In: function(obj, index, name){
107+
console.log(&#39;In&#39;, obj, index, name);
108+
},
109+
Out: function(obj, index, name){
110+
console.log(&#39;Out&#39;, obj, index, name);
111+
},
112+
Scroll: function(top){
113+
console.log(&#39;Scroll&#39;, top);
114+
}
115+
}
116+
});
117+
&lt;/script&gt;
118+
</code></pre>
119+
</details>
93120

94121
<script>
95122
const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
96123
target: '[data-scroll]',
97-
classNameInview : 'is-active',
98-
displayRatio : 0.8,
99-
displayReverse : true,
100-
displayRatioReverse: null,
101-
firstDelay : 100,
102-
throttleInterval : 3,
103-
autoStart : true,
124+
classNameInview : 'is-active',
125+
ratio : 0.5,
126+
ratioReverse : 0.9,
127+
reverse : true,
128+
firstDelay : 100,
129+
autoStart : true,
104130
on: {
105131
Change: function(obj, index, name){
106132
console.log('Change', obj, index, name);
@@ -147,22 +173,22 @@ <h2>EffectType : fadein bottom</h2>
147173
<p>[data-scroll-type="fadeinBottom"]</p>
148174
</div>
149175
<br><br><br><br><br><br><br><br><br><br><br><br>
150-
<div class="text-center" data-scroll data-scroll-type="fadeinLeft">
176+
<div class="text-center" data-scroll data-scroll-name="demo4" data-scroll-type="fadeinLeft">
151177
<h2>EffectType : fadein left</h2>
152178
<p>[data-scroll-type="fadeinLeft"]</p>
153179
</div>
154180
<br><br><br><br><br><br><br><br><br><br><br><br>
155-
<div class="text-center" data-scroll data-scroll-type="fadeinRight">
181+
<div class="text-center" data-scroll data-scroll-name="demo5" data-scroll-type="fadeinRight">
156182
<h2>EffectType : fadein right</h2>
157183
<p>[data-scroll-type="fadeinRight"]</p>
158184
</div>
159185
<br><br><br><br><br><br><br><br><br><br><br><br>
160-
<div class="text-center" data-scroll data-scroll-type="zoomin">
186+
<div class="text-center" data-scroll data-scroll-name="demo6" data-scroll-type="zoomin">
161187
<h2>EffectType : fadein zoomin</h2>
162188
<p>[data-scroll-type="zoomin"]</p>
163189
</div>
164190
<br><br><br><br><br><br><br><br><br><br><br><br>
165-
<div class="text-center" data-scroll data-scroll-type="spinin">
191+
<div class="text-center" data-scroll data-scroll-name="demo7" data-scroll-type="spinin">
166192
<h2>EffectType : spinin</h2>
167193
<p>[data-scroll-type="spinin"]</p>
168194
</div>

0 commit comments

Comments
 (0)