Skip to content

Commit 0de24ec

Browse files
yama-devyama-dev
committed
adjust examples.
1 parent 0366b4c commit 0de24ec

File tree

2 files changed

+52
-112
lines changed

2 files changed

+52
-112
lines changed

‎examples/acceleration.html‎

Lines changed: 1 addition & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -35,22 +35,8 @@ <h3>Acceleration Sample.</h3>
3535

3636
&lt;script&gt;
3737
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
38-
elem : &#039;.js-scroll&#039;,
39-
displayRatio : 0.8,
40-
displayReverse : true,
41-
firstElem : &#039;.js-scroll--first&#039;,
42-
firstElemDelayTime : 300,
43-
firstDelayTime : 500,
44-
loadDelayTime : 0,
45-
addClassNameActive : null,
4638
acceleration : true,
4739
on: {
48-
In: function(item, pos, top){
49-
console.log(&#039;In&#039;, item, pos ,top);
50-
},
51-
Out: function(item, pos, top){
52-
console.log(&#039;Out&#039;, item, pos ,top);
53-
},
5440
Acceleration: function(num){
5541
console.log(&#039;Acceleration&#039;, num);
5642
document.querySelector(&#039;.dev .t2&#039;).innerHTML = num;
@@ -63,22 +49,8 @@ <h3>Acceleration Sample.</h3>
6349

6450
<script>
6551
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
66-
elem : '.js-scroll',
67-
displayRatio : 0.8,
68-
displayReverse : true,
69-
firstElem : '.js-scroll--first',
70-
firstElemDelayTime : 300,
71-
firstDelayTime : 500,
72-
loadDelayTime : 0,
73-
addClassNameActive : null,
7452
acceleration : true,
7553
on: {
76-
In: function(item, pos, top){
77-
console.log('In', item, pos ,top);
78-
},
79-
Out: function(item, pos, top){
80-
console.log('Out', item, pos ,top);
81-
},
8254
Acceleration: function(num){
8355
console.log('Acceleration', num);
8456
document.querySelector('.dev .t2').innerHTML = num;
@@ -88,52 +60,11 @@ <h3>Acceleration Sample.</h3>
8860
});
8961
</script>
9062

91-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Update()">要素の情報更新 - ScrollEffectModule.Update()</button></p>
92-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Refresh()">リフレッシュ - ScrollEffectModule.Refresh()</button></p>
93-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Clear()">非アクティブ化 - ScrollEffectModule.Clear()</button></p>
94-
9563
</div>
9664

9765
<hr class="mt-4 mb-4">
9866

99-
<div class="p-demo">
100-
<br><br><br><br><br><br><br><br><br><br><br><br>
101-
<div class="js-scroll js-scroll--first-none js-scroll__fadein-basic text-center">
102-
<h2>EffectType : fadein basic</h2>
103-
<p>EffectClassname : .js-scroll__fadein-basic</p>
104-
</div>
105-
<br><br><br><br><br><br><br><br><br><br><br><br>
106-
<div class="js-scroll js-scroll__fadein-top text-center">
107-
<h2>EffectType : fadein top</h2>
108-
<p>EffectClassname : .js-scroll__fadein-top</p>
109-
</div>
110-
<br><br><br><br><br><br><br><br><br><br><br><br>
111-
<div class="js-scroll js-scroll__fadein-bottom text-center">
112-
<h2>EffectType : fadein bottom</h2>
113-
<p>EffectClassname : .js-scroll__fadein-bottom</p>
114-
</div>
115-
<br><br><br><br><br><br><br><br><br><br><br><br>
116-
<div class="js-scroll js-scroll__fadein-left text-center">
117-
<h2>EffectType : fadein left</h2>
118-
<p>EffectClassname : .js-scroll__fadein-left</p>
119-
</div>
120-
<br><br><br><br><br><br><br><br><br><br><br><br>
121-
<div class="js-scroll js-scroll__fadein-right text-center">
122-
<h2>EffectType : fadein right</h2>
123-
<p>EffectClassname : .js-scroll__fadein-right</p>
124-
</div>
125-
<br><br><br><br><br><br><br><br><br><br><br><br>
126-
<div class="js-scroll js-scroll__fadein-zoomin text-center">
127-
<h2>EffectType : fadein zoomin</h2>
128-
<p>EffectClassname : .js-scroll__fadein-zoomin</p>
129-
</div>
130-
<br><br><br><br><br><br><br><br><br><br><br><br>
131-
<div class="js-scroll js-scroll__spinin text-center">
132-
<h2>EffectType : spinin</h2>
133-
<p>EffectClassname : .js-scroll__spinin</p>
134-
</div>
135-
<br><br><br><br><br><br><br><br><br><br><br><br>
136-
</div>
67+
<div class="p-demo" style="height: 10000px;"></div>
13768

13869
</div>
13970

‎examples/index.html‎

Lines changed: 51 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -37,42 +37,53 @@ <h2 class="mb-3">SCROLL EFFECT MODULE v0.5.0</h2>
3737

3838
<hr class="mt-4 mb-4">
3939

40-
<div class="p-use js-scroll--first js-scroll__fadein-bottom">
40+
<div class="p-use js-scroll js-scroll--first js-scroll__fadein-bottom">
4141
<h3>Basic Use</h3>
4242
<pre class="prettyprint lang-html">
43-
<code>
44-
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
45-
&lt;div class=&quot;js-scroll js-scroll__fadein-basic&quot;&gt;&lt;/div&gt;
43+
<code>
44+
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
45+
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
46+
&lt;div class=&quot;js-scroll js-scroll__fadein-basic&quot;&gt;&lt;/div&gt;
4647

47-
&lt;script&gt; new SCROLL_EFFECT_MODULE({ elem: &#039;.js-scroll&#039; }); &lt;/script&gt;</code>
48+
&lt;script&gt; new SCROLL_EFFECT_MODULE({ elem: &#039;.js-scroll&#039; }); &lt;/script&gt;</code>
4849
</pre>
4950
</div>
5051

51-
<hr class="mt-4 mb-4 js-scroll--first js-scroll__fadein-bottom">
52+
<hr class="mt-4 mb-4 js-scroll js-scroll--first js-scroll__fadein-bottom">
5253

53-
<div class="p-use js-scroll--first js-scroll__fadein-bottom">
54-
<h3>Custom Use</h3>
54+
<div class="p-use js-scroll js-scroll--first js-scroll__fadein-bottom">
55+
<h3>Advanced Use</h3>
5556
<pre class="prettyprint lang-html">
5657
<code>
58+
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
5759
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
58-
&lt;div class=&quot;js-scroll js-scroll__fadein-basic&quot;&gt;&lt;/div&gt;
60+
&lt;div class=&quot;js-scroll&quot;&gt;&lt;/div&gt;
5961

6062
&lt;script&gt;
6163
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
6264
elem : &#039;.js-scroll&#039;,
63-
displayRatio : 0.8,
64-
displayReverse : true,
6565
firstElem : &#039;.js-scroll--first&#039;,
66-
firstElemDelayTime : 300,
67-
firstDelayTime : 500,
68-
loadDelayTime : 0,
69-
addClassNameActive : &#039;is-active&#039;,
66+
67+
displayRatio : 0.8, // 判定する比率を指定（ウィンドウ高さを1として指定）
68+
displayReverse : true, // スクロールを戻した時にクラスを削除するかどうか
69+
70+
firstDelay : 0, // 初回動作までの遅延時間（ms）
71+
firstDelaySteps : 100, // 初回出現要素を指定した場合のステップ遅延時間（ms）
72+
73+
addClassNameActive : &#039;is-active&#039;, // null を設定するとクラスが付与されなくなる。
74+
7075
on: {
76+
Scroll: function(top){
77+
console.log(&#039;Scroll&#039;, top);
78+
},
79+
Change: function(item, pos){
80+
console.log(&#039;Change&#039;, item, pos);
81+
},
7182
In: function(item, pos){
72-
console.log(&#039;In&#039;, item, pos)
83+
console.log(&#039;In&#039;, item, pos);
7384
},
7485
Out: function(item, pos){
75-
console.log(&#039;Out&#039;, item, pos)
86+
console.log(&#039;Out&#039;, item, pos);
7687
}
7788
}
7889
});
@@ -82,14 +93,25 @@ <h3>Custom Use</h3>
8293
<script>
8394
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
8495
elem : '.js-scroll',
96+
firstElem : '.js-scroll--first',
97+
8598
displayRatio : 0.8,
8699
displayReverse : true,
87-
firstElem : '.js-scroll--first',
88-
firstElemDelayTime : 300,
89-
firstDelayTime : 500,
90-
loadDelayTime : 0,
91-
addClassNameActive : null,
100+
101+
firstDelay : 0,
102+
firstDelaySteps : 100,
103+
104+
addClassNameActive : 'is-active',
105+
92106
on: {
107+
Scroll: function(top){
108+
console.log('Scroll', top);
109+
document.querySelector('.dev .t1').innerHTML = top;
110+
},
111+
Change: function(item, pos){
112+
console.log('Change', item, pos);
113+
document.querySelector('.dev .t2').innerHTML = pos;
114+
},
93115
In: function(item, pos){
94116
console.log('In', item, pos);
95117
},
@@ -109,34 +131,16 @@ <h3>Custom Use</h3>
109131
<hr class="mt-4 mb-4 js-scroll js-scroll__fadein-bottom">
110132

111133
<div class="p-use js-scroll js-scroll__fadein-bottom">
112-
<h3>Custom Use (Acceleration)</h3>
134+
<h3>Advanced Use (Acceleration)</h3>
113135
<pre class="prettyprint lang-html">
114136
<code>
115-
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
116-
&lt;div class=&quot;js-scroll js-scroll__fadein-basic&quot;&gt;&lt;/div&gt;
117-
137+
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
118138
&lt;script&gt;
119139
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
120-
elem : &#039;.js-scroll&#039;,
121-
displayRatio : 0.8,
122-
displayReverse : true,
123-
firstElem : &#039;.js-scroll--first&#039;,
124-
firstElemDelayTime : 300,
125-
firstDelayTime : 500,
126-
loadDelayTime : 0,
127-
addClassNameActive : null,
128140
acceleration : true,
129141
on: {
130-
In: function(item, pos, top){
131-
console.log(&#039;In&#039;, item, pos ,top);
132-
},
133-
Out: function(item, pos, top){
134-
console.log(&#039;Out&#039;, item, pos ,top);
135-
},
136142
Acceleration: function(num){
137143
console.log(&#039;Acceleration&#039;, num);
138-
document.querySelector(&#039;.dev .t2&#039;).innerHTML = num;
139-
document.querySelector(&#039;.bg&#039;).style.height = Math.abs(num)+&#039;%&#039;;
140144
}
141145
}
142146
});
@@ -191,6 +195,11 @@ <h2>EffectType : spinin</h2>
191195

192196
</div>
193197

198+
<div class="dev" style="position: fixed; bottom: 0; left: 0; padding: 10px; background: rgba(0,0,0,0.5); color: #fff;">
199+
<div>スクロール　：　<span class="t1" style="display: inline-block; width: 3em;"></span>[px]</div>
200+
<div>ポジション　：　<span class="t2" style="display: inline-block; width: 3em;"></span></div>
201+
</div>
202+
194203
<a href="https://github.com/yama-dev/js-scroll-effect-module" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
195204

196205
</body>

0 commit comments

Comments
 (0)