Skip to content

Commit 6a3801c

Browse files
yama-devyama-dev
committed
adjust sample page.
1 parent 3d773cf commit 6a3801c

File tree

1 file changed

+124
-125
lines changed

1 file changed

+124
-125
lines changed

‎sample/index.html‎

Lines changed: 124 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -8,152 +8,151 @@
88
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
99
<link rel="stylesheet" href="./scroll-effect-module.css">
1010
<script src="../dist/js-scroll-effect-module.js"></script>
11+
1112
<script async defer src="https://buttons.github.io/buttons.js"></script>
1213
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
14+
15+
<!-- Global site tag (gtag.js) - Google Analytics -->
16+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-91619969-3"></script>
17+
<script>
18+
window.dataLayer = window.dataLayer || [];
19+
function gtag(){dataLayer.push(arguments);}
20+
gtag('js', new Date());
21+
gtag('config', 'UA-91619969-3');
22+
</script>
1323
</head>
14-
<body>
15-
<div class="container-fluid" style="overflow:hidden;">
24+
<body style="overflow-x:hidden;">
25+
<div class="container mt-4">
1626

17-
<div class="row mt-3">
18-
<div class="col-md-1"></div>
19-
<div class="col-md-10">
20-
<h2 class="mb-3">SCROLL EFFECT MODULE v0.1.2</h2>
27+
<h2 class="mb-3">SCROLL EFFECT MODULE v0.1.3</h2>
2128

22-
<p>Add effect at scroll.</p>
29+
<p>Add effect at scroll.</p>
2330

24-
<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>
25-
<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>
26-
<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>
27-
<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>
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>
29-
<style>.p-sns > span{ display: inline-block; }</style>
31+
<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>
32+
<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>
33+
<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>
34+
<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.2 Add effect at scroll." data-show-count="false">Tweet</a></span>
36+
<style>.p-sns > span{ display: inline-block; }</style>
3037

31-
<hr class="mt-4 mb-4">
38+
<hr class="mt-4 mb-4">
3239

33-
<h3>Basic Use</h3>
34-
<div>
35-
<pre class="prettyprint lang-html">
40+
<div class="p-use">
41+
<h3>Basic Use</h3>
42+
<pre class="prettyprint lang-html">
3643
<code>
3744
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
3845
&lt;div class=&quot;effect_item effect__fadein-basic&quot;&gt;
3946

4047
&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>
48-
<script>
49-
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
50-
elem : '.effect_item',
51-
displayRatio : 0.8,
52-
displayReverse : true,
53-
firstElem : '.effect_item--first',
54-
firstElemDelayTime : 300,
55-
firstDelayTime : 500,
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-
}
70-
});
71-
</script>
72-
<pre class="prettyprint lang-html">
73-
<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;
48+
</pre>
49+
</div>
7650

77-
&lt;script&gt;
78-
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
79-
elem : &#039;.effect_item&#039;,
80-
displayRatio : 0.8,
81-
displayReverse : true,
82-
firstElem : &#039;.effect_item--first&#039;,
83-
firstElemDelayTime : 300,
84-
firstDelayTime : 500,
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-
}
51+
<hr class="mt-4 mb-4">
52+
53+
<div class="p-use">
54+
<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 : 'is-active',
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>
79+
<pre class="prettyprint lang-html">
80+
<code>
81+
&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;
83+
84+
&lt;script&gt;
85+
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
86+
elem : &#039;.effect_item&#039;,
87+
displayRatio : 0.8,
88+
displayReverse : true,
89+
firstElem : &#039;.effect_item--first&#039;,
90+
firstElemDelayTime : 300,
91+
firstDelayTime : 500,
92+
loadDelayTime : 0,
93+
addClassNameActive : &#039;is-active&#039;,
94+
on: {
95+
In: function(item, pos){
96+
console.log(&#039;In&#039;)
97+
console.log(item);
98+
console.log(pos);
99+
},
100+
Out: function(item, pos){
101+
console.log(&#039;Out&#039;)
102+
console.log(item);
103+
console.log(pos);
98104
}
99-
});
100-
&lt;/script&gt;</code>
101-
</pre>
105+
}
106+
});
107+
&lt;/script&gt;</code>
108+
</pre>
102109

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>
110+
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.UpdateDom()">要素の情報更新 - ScrollEffectModule.UpdateDom()</button></p>
111+
<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>
106113

107-
</div>
114+
</div>
108115

109-
<hr class="mt-4 mb-4">
116+
<hr class="mt-4 mb-4">
110117

118+
<div class="p-demo">
119+
<h3>DEMO</h3>
120+
<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+
<h2>EffectType : fadein basic</h2>
123+
<p>EffectClassname : .effect__fadein-basic</p>
111124
</div>
112-
<div class="col-md-1"></div>
113-
</div>
114-
115-
<div class="row mt10">
116-
<div class="col-md-1"></div>
117-
<div class="col-md-10">
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">
121-
<h2>EffectType : fadein basic</h2>
122-
<p>EffectClassname : .effect__fadein-basic</p>
123-
</div>
124-
<br><br><br><br><br><br><br><br><br><br><br><br>
125-
<div class="effect_item effect__fadein-top text-center">
126-
<h2>EffectType : fadein top</h2>
127-
<p>EffectClassname : .effect__fadein-top</p>
128-
</div>
129-
<br><br><br><br><br><br><br><br><br><br><br><br>
130-
<div class="effect_item effect__fadein-bottom text-center">
131-
<h2>EffectType : fadein bottom</h2>
132-
<p>EffectClassname : .effect__fadein-bottom</p>
133-
</div>
134-
<br><br><br><br><br><br><br><br><br><br><br><br>
135-
<div class="effect_item effect__fadein-left text-center">
136-
<h2>EffectType : fadein left</h2>
137-
<p>EffectClassname : .effect__fadein-left</p>
138-
</div>
139-
<br><br><br><br><br><br><br><br><br><br><br><br>
140-
<div class="effect_item effect__fadein-right text-center">
141-
<h2>EffectType : fadein right</h2>
142-
<p>EffectClassname : .effect__fadein-right</p>
143-
</div>
144-
<br><br><br><br><br><br><br><br><br><br><br><br>
145-
<div class="effect_item effect__fadein-zoomin text-center">
146-
<h2>EffectType : fadein zoomin</h2>
147-
<p>EffectClassname : .effect__fadein-zoomin</p>
148-
</div>
149-
<br><br><br><br><br><br><br><br><br><br><br><br>
150-
<div class="effect_item effect__spinin text-center">
151-
<h2>EffectType : spinin</h2>
152-
<p>EffectClassname : .effect__spinin</p>
153-
</div>
154-
<br><br><br><br><br><br><br><br><br><br><br><br>
125+
<br><br><br><br><br><br><br><br><br><br><br><br>
126+
<div class="effect_item effect__fadein-top text-center">
127+
<h2>EffectType : fadein top</h2>
128+
<p>EffectClassname : .effect__fadein-top</p>
129+
</div>
130+
<br><br><br><br><br><br><br><br><br><br><br><br>
131+
<div class="effect_item effect__fadein-bottom text-center">
132+
<h2>EffectType : fadein bottom</h2>
133+
<p>EffectClassname : .effect__fadein-bottom</p>
134+
</div>
135+
<br><br><br><br><br><br><br><br><br><br><br><br>
136+
<div class="effect_item effect__fadein-left text-center">
137+
<h2>EffectType : fadein left</h2>
138+
<p>EffectClassname : .effect__fadein-left</p>
139+
</div>
140+
<br><br><br><br><br><br><br><br><br><br><br><br>
141+
<div class="effect_item effect__fadein-right text-center">
142+
<h2>EffectType : fadein right</h2>
143+
<p>EffectClassname : .effect__fadein-right</p>
144+
</div>
145+
<br><br><br><br><br><br><br><br><br><br><br><br>
146+
<div class="effect_item effect__fadein-zoomin text-center">
147+
<h2>EffectType : fadein zoomin</h2>
148+
<p>EffectClassname : .effect__fadein-zoomin</p>
149+
</div>
150+
<br><br><br><br><br><br><br><br><br><br><br><br>
151+
<div class="effect_item effect__spinin text-center">
152+
<h2>EffectType : spinin</h2>
153+
<p>EffectClassname : .effect__spinin</p>
155154
</div>
156-
<div class="col-md-1"></div>
155+
<br><br><br><br><br><br><br><br><br><br><br><br>
157156
</div>
158157

159158
</div>

0 commit comments

Comments
 (0)