Skip to content

Commit 498a349

Browse files
yama-devyama-dev
authored
Merge pull request #10 from yama-dev/v0.3.0
V0.3.0
2 parents d2e50cd + f9f2462 commit 498a349

File tree

5 files changed

+269
-31
lines changed

5 files changed

+269
-31
lines changed

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

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/acceleration.html

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, user-scalable=no">
6+
<title>js-scroll-effect-module | yama-dev</title>
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
8+
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
9+
<link rel="stylesheet" href="./scroll-effect-module.css">
10+
<script src="../dist/js-scroll-effect-module.js"></script>
11+
12+
<script async defer src="https://buttons.github.io/buttons.js"></script>
13+
<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>
23+
</head>
24+
<body style="overflow-x:hidden;">
25+
<div class="container mt-4">
26+
27+
<h2 class="mb-3">DEMO</h2>
28+
29+
<div class="p-use">
30+
<h3>Acceleration Sample.</h3>
31+
<pre class="prettyprint lang-html">
32+
<code>
33+
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
34+
&lt;div class=&quot;js-scroll js-scroll__fadein-basic&quot;&gt;&lt;/div&gt;
35+
36+
&lt;script&gt;
37+
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,
46+
acceleration : true,
47+
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+
},
54+
Acceleration: function(num){
55+
console.log(&#039;Acceleration&#039;, num);
56+
document.querySelector(&#039;.dev .t2&#039;).innerHTML = num;
57+
document.querySelector(&#039;.bg&#039;).style.height = Math.abs(num)+&#039;%&#039;;
58+
}
59+
}
60+
});
61+
&lt;/script&gt;</code>
62+
</pre>
63+
64+
<script>
65+
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,
74+
acceleration : true,
75+
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+
},
82+
Acceleration: function(num){
83+
console.log('Acceleration', num);
84+
document.querySelector('.dev .t2').innerHTML = num;
85+
document.querySelector('.bg').style.height = Math.abs(num)+'%';
86+
}
87+
}
88+
});
89+
</script>
90+
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+
95+
</div>
96+
97+
<hr class="mt-4 mb-4">
98+
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>
137+
138+
</div>
139+
140+
<div class="bg">
141+
<style>
142+
.bg {
143+
position: fixed;
144+
bottom: 0;
145+
left: 0;
146+
width: 100%;
147+
height: 0%;
148+
background: rgba(0,0,0,0.2);
149+
}
150+
</style>
151+
</div>
152+
153+
<div class="dev" style="position: fixed; bottom: 0; left: 0; padding: 10px; background: rgba(0,0,0,0.5); color: #fff;">
154+
<div>加速度、慣性値：<span class="t2" style="display: inline-block; width: 5em;"></span></div>
155+
</div>
156+
157+
<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>
158+
159+
</body>
160+
</html>

0 commit comments

Comments
 (0)