Skip to content

Commit d468dd2

Browse files
yama-devyama-dev
committed
modify:
add callbackmethod. --- on: { In: function(item, pos){ }, Out: function(item, pos){ } } --- add RemoveAll method. --- RemoveAll(); ---
1 parent 799b508 commit d468dd2

File tree

3 files changed

+101
-26
lines changed

3 files changed

+101
-26
lines changed

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎sample/index.html‎

Lines changed: 73 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,34 @@
1717
<div class="row mt-3">
1818
<div class="col-md-1"></div>
1919
<div class="col-md-10">
20-
<h2 class="mb-5">SCROLL EFFECT MODULE v0.1.2</h2>
20+
<h2 class="mb-3">SCROLL EFFECT MODULE v0.1.2</h2>
21+
22+
<p>Add effect at scroll.</p>
2123

2224
<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>
2325
<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>
2426
<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>
2527
<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>
26-
<span class="p-sns"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="SCROLL EFFECT MODULE v0.1.2 https://github.com/yama-dev/js-scroll-effect-module" data-show-count="false">Tweet</a></span>
28+
<span class="p-sns"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="SCROLL EFFECT MODULE v0.1.2 Add effect at scroll." data-show-count="false">Tweet</a></span>
2729
<style>.p-sns > span{ display: inline-block; }</style>
2830

29-
<hr class="mt-5 mb-5">
31+
<hr class="mt-4 mb-4">
32+
33+
<h3>Basic Use</h3>
34+
<div>
35+
<pre class="prettyprint lang-html">
36+
<code>
37+
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
38+
&lt;div class=&quot;effect_item effect__fadein-basic&quot;&gt;
3039

31-
<h3>Sample Code</h3>
32-
<div id="brightcovePlayer1">
40+
&lt;script&gt; new SCROLL_EFFECT_MODULE({ elem: &#039;.effect_item&#039; }); &lt;/script&gt;</code>
41+
</pre>
42+
</div>
43+
44+
<hr class="mt-4 mb-4">
45+
46+
<h3>Custom Use</h3>
47+
<div>
3348
<script>
3449
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
3550
elem : '.effect_item',
@@ -38,11 +53,27 @@ <h3>Sample Code</h3>
3853
firstElem : '.effect_item--first',
3954
firstElemDelayTime : 300,
4055
firstDelayTime : 500,
41-
loadDelayTime : 0
56+
loadDelayTime : 0,
57+
addClassNameActive : 'is-active',
58+
on: {
59+
In: function(item, pos){
60+
console.log('In')
61+
console.log(item);
62+
console.log(pos);
63+
},
64+
Out: function(item, pos){
65+
console.log('Out')
66+
console.log(item);
67+
console.log(pos);
68+
}
69+
}
4270
});
4371
</script>
4472
<pre class="prettyprint lang-html">
4573
<code>
74+
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
75+
&lt;div class=&quot;effect_item effect__fadein-basic&quot;&gt;
76+
4677
&lt;script&gt;
4778
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
4879
elem : &#039;.effect_item&#039;,
@@ -51,13 +82,31 @@ <h3>Sample Code</h3>
5182
firstElem : &#039;.effect_item--first&#039;,
5283
firstElemDelayTime : 300,
5384
firstDelayTime : 500,
54-
loadDelayTime : 0
85+
loadDelayTime : 0,
86+
addClassNameActive : &#039;is-active&#039;,
87+
on: {
88+
In: function(item, pos){
89+
console.log(&#039;In&#039;)
90+
console.log(item);
91+
console.log(pos);
92+
},
93+
Out: function(item, pos){
94+
console.log(&#039;Out&#039;)
95+
console.log(item);
96+
console.log(pos);
97+
}
98+
}
5599
});
56100
&lt;/script&gt;</code>
57101
</pre>
102+
103+
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.UpdateDom()">要素の情報更新 - ScrollEffectModule.UpdateDom()</button></p>
104+
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Refresh()">リフレッシュ - ScrollEffectModule.Refresh()</button></p>
105+
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.RemoveAll()">非アクティブ化 - ScrollEffectModule.RemoveAll()</button></p>
106+
58107
</div>
59108

60-
<hr class="mt-5 mb-5">
109+
<hr class="mt-4 mb-4">
61110

62111
</div>
63112
<div class="col-md-1"></div>
@@ -66,41 +115,43 @@ <h3>Sample Code</h3>
66115
<div class="row mt10">
67116
<div class="col-md-1"></div>
68117
<div class="col-md-10">
69-
<div class="effect_item effect_item--first-none effect__fadein-basic">
118+
<h3>DEMO</h3>
119+
<br><br><br><br><br><br><br><br><br><br><br><br>
120+
<div class="effect_item effect_item--first-none effect__fadein-basic text-center">
70121
<h2>EffectType : fadein basic</h2>
71122
<p>EffectClassname : .effect__fadein-basic</p>
72123
</div>
73-
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
74-
<div class="effect_item effect__fadein-top">
124+
<br><br><br><br><br><br><br><br><br><br><br><br>
125+
<div class="effect_item effect__fadein-top text-center">
75126
<h2>EffectType : fadein top</h2>
76127
<p>EffectClassname : .effect__fadein-top</p>
77128
</div>
78-
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
79-
<div class="effect_item effect__fadein-bottom">
129+
<br><br><br><br><br><br><br><br><br><br><br><br>
130+
<div class="effect_item effect__fadein-bottom text-center">
80131
<h2>EffectType : fadein bottom</h2>
81132
<p>EffectClassname : .effect__fadein-bottom</p>
82133
</div>
83-
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
84-
<div class="effect_item effect__fadein-left">
134+
<br><br><br><br><br><br><br><br><br><br><br><br>
135+
<div class="effect_item effect__fadein-left text-center">
85136
<h2>EffectType : fadein left</h2>
86137
<p>EffectClassname : .effect__fadein-left</p>
87138
</div>
88-
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
89-
<div class="effect_item effect__fadein-right">
139+
<br><br><br><br><br><br><br><br><br><br><br><br>
140+
<div class="effect_item effect__fadein-right text-center">
90141
<h2>EffectType : fadein right</h2>
91142
<p>EffectClassname : .effect__fadein-right</p>
92143
</div>
93-
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
94-
<div class="effect_item effect__fadein-zoomin">
144+
<br><br><br><br><br><br><br><br><br><br><br><br>
145+
<div class="effect_item effect__fadein-zoomin text-center">
95146
<h2>EffectType : fadein zoomin</h2>
96147
<p>EffectClassname : .effect__fadein-zoomin</p>
97148
</div>
98-
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
99-
<div class="effect_item effect__spinin">
149+
<br><br><br><br><br><br><br><br><br><br><br><br>
150+
<div class="effect_item effect__spinin text-center">
100151
<h2>EffectType : spinin</h2>
101152
<p>EffectClassname : .effect__spinin</p>
102153
</div>
103-
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
154+
<br><br><br><br><br><br><br><br><br><br><br><br>
104155
</div>
105156
<div class="col-md-1"></div>
106157
</div>

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

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,16 @@ class SCROLL_EFFECT_MODULE {
5151
firstElemDelayTime : options.firstElemDelayTime||0,
5252
firstDelayTime : options.firstDelayTime||300,
5353
loadDelayTime : options.loadDelayTime||0,
54-
addClassNameLoaded : options.addClassNameLoaded||'is-loaded',
55-
addClassNameActive : options.addClassNameActive||'is-active',
54+
addClassNameActive : options.addClassNameActive||'is-active'
55+
}
56+
57+
// Set callback functions.
58+
if(!options.on){
59+
options.on = {}
60+
}
61+
this.on = {
62+
In : options.on.In||'',
63+
Out : options.on.Out||''
5664
}
5765

5866
// Store element information.
@@ -130,7 +138,17 @@ class SCROLL_EFFECT_MODULE {
130138
this.CacheElementSize();
131139
this.SetDom();
132140
for(let _i = 0;_i < this.ElemList.length; _i++){
133-
this.ElemList[_i].removeClass(this.Config.addClassNameActive);
141+
this.$elemItem[_i].removeClass(this.Config.addClassNameActive);
142+
}
143+
this.ActionAddClass();
144+
}
145+
146+
RemoveAll(){
147+
this.CacheElement();
148+
this.CacheElementSize();
149+
this.SetDom();
150+
for(let _i = 0;_i < this.ElemList.length; _i++){
151+
this.$elemItem[_i].removeClass(this.Config.addClassNameActive);
134152
}
135153
}
136154

@@ -208,12 +226,18 @@ class SCROLL_EFFECT_MODULE {
208226
for(let _i = 0;_i < this.ElemListFix.length; _i++){
209227
if(this.$elemItem[this.ElemListFix[_i]].hasClass(this.Config.addClassNameActive)){}else{
210228
this.$elemItem[this.ElemListFix[_i]].addClass(this.Config.addClassNameActive);
229+
230+
// Callback function.
231+
if(this.on.In && typeof(this.on.In) === 'function') this.on.In(this.$elemItem[this.ElemListFix[_i]], this.ElemListFix[_i]);
211232
}
212233
}
213234
if(this.Config.displayReverse){
214235
for(let _i = 0;_i < this.ElemListNoneFix.length; _i++){
215236
if(this.$elemItem[this.ElemListNoneFix[_i]].hasClass(this.Config.addClassNameActive)){
216237
this.$elemItem[this.ElemListNoneFix[_i]].removeClass(this.Config.addClassNameActive);
238+
239+
// Callback function.
240+
if(this.on.Out && typeof(this.on.Out) === 'function') this.on.Out(this.$elemItem[this.ElemListNoneFix[_i]], this.ElemListNoneFix[_i]);
217241
}
218242
}
219243
}

0 commit comments

Comments
 (0)