Skip to content

Commit f277372

Browse files
yama-devyama-dev
committed
adjust example html
1 parent b82e62e commit f277372

File tree

1 file changed

+82
-56
lines changed

1 file changed

+82
-56
lines changed

‎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)