Skip to content

Commit 5222cfd

Browse files
yama-devyama-dev
committed
adjust example-html.
1 parent 6f16bdc commit 5222cfd

File tree

1 file changed

+48
-47
lines changed

1 file changed

+48
-47
lines changed

example/index.html renamed to examples/index.html

Lines changed: 48 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -24,15 +24,15 @@
2424
<body style="overflow-x:hidden;">
2525
<div class="container mt-4">
2626

27-
<h2 class="mb-3">SCROLL EFFECT MODULE v0.1.4</h2>
27+
<h2 class="mb-3">SCROLL EFFECT MODULE v0.2.0</h2>
2828

2929
<p>Add effect at scroll.</p>
3030

3131
<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>
3232
<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>
3333
<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>
3434
<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.1.4 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.2.0 Add effect at scroll." data-show-count="false">Tweet</a></span>
3636
<style>.p-sns > span{ display: inline-block; }</style>
3737

3838
<hr class="mt-4 mb-4">
@@ -42,51 +42,27 @@ <h3>Basic Use</h3>
4242
<pre class="prettyprint lang-html">
4343
<code>
4444
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
45-
&lt;div class=&quot;effect_item effect__fadein-basic&quot;&gt;
45+
&lt;div class=&quot;js-scroll js-scroll__fadein-basic&quot;&gt;
4646

47-
&lt;script&gt; new SCROLL_EFFECT_MODULE({ elem: &#039;.effect_item&#039; }); &lt;/script&gt;</code>
47+
&lt;script&gt; new SCROLL_EFFECT_MODULE({ elem: &#039;.js-scroll&#039; }); &lt;/script&gt;</code>
4848
</pre>
4949
</div>
5050

5151
<hr class="mt-4 mb-4">
5252

5353
<div class="p-use">
5454
<h3>Custom Use</h3>
55-
<script>
56-
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
57-
elem : '.effect_item',
58-
displayRatio : 0.8,
59-
displayReverse : true,
60-
firstElem : '.effect_item--first',
61-
firstElemDelayTime : 300,
62-
firstDelayTime : 500,
63-
loadDelayTime : 0,
64-
addClassNameActive : null,
65-
on: {
66-
In: function(item, pos){
67-
console.log('In')
68-
console.log(item);
69-
console.log(pos);
70-
},
71-
Out: function(item, pos){
72-
console.log('Out')
73-
console.log(item);
74-
console.log(pos);
75-
}
76-
}
77-
});
78-
</script>
7955
<pre class="prettyprint lang-html">
8056
<code>
8157
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
82-
&lt;div class=&quot;effect_item effect__fadein-basic&quot;&gt;
58+
&lt;div class=&quot;js-scroll js-scroll__fadein-basic&quot;&gt;
8359

8460
&lt;script&gt;
8561
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
86-
elem : &#039;.effect_item&#039;,
62+
elem : &#039;.js-scroll&#039;,
8763
displayRatio : 0.8,
8864
displayReverse : true,
89-
firstElem : &#039;.effect_item--first&#039;,
65+
firstElem : &#039;.js-scroll--first&#039;,
9066
firstElemDelayTime : 300,
9167
firstDelayTime : 500,
9268
loadDelayTime : 0,
@@ -107,9 +83,34 @@ <h3>Custom Use</h3>
10783
&lt;/script&gt;</code>
10884
</pre>
10985

110-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.UpdateDom()">要素の情報更新 - ScrollEffectModule.UpdateDom()</button></p>
86+
<script>
87+
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
88+
elem : '.js-scroll',
89+
displayRatio : 0.8,
90+
displayReverse : true,
91+
firstElem : '.js-scroll--first',
92+
firstElemDelayTime : 300,
93+
firstDelayTime : 500,
94+
loadDelayTime : 0,
95+
addClassNameActive : null,
96+
on: {
97+
In: function(item, pos){
98+
console.log('In')
99+
console.log(item);
100+
console.log(pos);
101+
},
102+
Out: function(item, pos){
103+
console.log('Out')
104+
console.log(item);
105+
console.log(pos);
106+
}
107+
}
108+
});
109+
</script>
110+
111+
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Update()">要素の情報更新 - ScrollEffectModule.Update()</button></p>
111112
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Refresh()">リフレッシュ - ScrollEffectModule.Refresh()</button></p>
112-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.RemoveAll()">非アクティブ化 - ScrollEffectModule.RemoveAll()</button></p>
113+
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Clear()">非アクティブ化 - ScrollEffectModule.Clear()</button></p>
113114

114115
</div>
115116

@@ -118,39 +119,39 @@ <h3>Custom Use</h3>
118119
<div class="p-demo">
119120
<h3>DEMO</h3>
120121
<br><br><br><br><br><br><br><br><br><br><br><br>
121-
<div class="effect_item effect_item--first-none effect__fadein-basic text-center">
122+
<div class="js-scroll js-scroll--first-none js-scroll__fadein-basic text-center">
122123
<h2>EffectType : fadein basic</h2>
123-
<p>EffectClassname : .effect__fadein-basic</p>
124+
<p>EffectClassname : .js-scroll__fadein-basic</p>
124125
</div>
125126
<br><br><br><br><br><br><br><br><br><br><br><br>
126-
<div class="effect_item effect__fadein-top text-center">
127+
<div class="js-scroll js-scroll__fadein-top text-center">
127128
<h2>EffectType : fadein top</h2>
128-
<p>EffectClassname : .effect__fadein-top</p>
129+
<p>EffectClassname : .js-scroll__fadein-top</p>
129130
</div>
130131
<br><br><br><br><br><br><br><br><br><br><br><br>
131-
<div class="effect_item effect__fadein-bottom text-center">
132+
<div class="js-scroll js-scroll__fadein-bottom text-center">
132133
<h2>EffectType : fadein bottom</h2>
133-
<p>EffectClassname : .effect__fadein-bottom</p>
134+
<p>EffectClassname : .js-scroll__fadein-bottom</p>
134135
</div>
135136
<br><br><br><br><br><br><br><br><br><br><br><br>
136-
<div class="effect_item effect__fadein-left text-center">
137+
<div class="js-scroll js-scroll__fadein-left text-center">
137138
<h2>EffectType : fadein left</h2>
138-
<p>EffectClassname : .effect__fadein-left</p>
139+
<p>EffectClassname : .js-scroll__fadein-left</p>
139140
</div>
140141
<br><br><br><br><br><br><br><br><br><br><br><br>
141-
<div class="effect_item effect__fadein-right text-center">
142+
<div class="js-scroll js-scroll__fadein-right text-center">
142143
<h2>EffectType : fadein right</h2>
143-
<p>EffectClassname : .effect__fadein-right</p>
144+
<p>EffectClassname : .js-scroll__fadein-right</p>
144145
</div>
145146
<br><br><br><br><br><br><br><br><br><br><br><br>
146-
<div class="effect_item effect__fadein-zoomin text-center">
147+
<div class="js-scroll js-scroll__fadein-zoomin text-center">
147148
<h2>EffectType : fadein zoomin</h2>
148-
<p>EffectClassname : .effect__fadein-zoomin</p>
149+
<p>EffectClassname : .js-scroll__fadein-zoomin</p>
149150
</div>
150151
<br><br><br><br><br><br><br><br><br><br><br><br>
151-
<div class="effect_item effect__spinin text-center">
152+
<div class="js-scroll js-scroll__spinin text-center">
152153
<h2>EffectType : spinin</h2>
153-
<p>EffectClassname : .effect__spinin</p>
154+
<p>EffectClassname : .js-scroll__spinin</p>
154155
</div>
155156
<br><br><br><br><br><br><br><br><br><br><br><br>
156157
</div>

0 commit comments

Comments
 (0)