Skip to content

Commit 23cfd4d

Browse files
yama-devyama-dev
authored
Merge pull request #21 from yama-dev/v0.11.0
V0.11.0
2 parents 22e3fdc + 5872b48 commit 23cfd4d

File tree

9 files changed

+438
-159
lines changed

9 files changed

+438
-159
lines changed

‎.env‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
SLUG=js-scroll-effect-module
2+
VERSION=0.11.0

‎Makefile‎

100644100755
Lines changed: 38 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,42 @@
1+
include .env
2+
3+
VIM := mvim
4+
5+
PROGRAM := npm
6+
RM := rm -rf
7+
MK := mkdir
8+
CP := cp
9+
ZIP := zip
10+
11+
ZIP_FOLDER := _v$(VERSION)
12+
13+
ENV_DEV := NODE_ENV=development
14+
ENV_PROD := NODE_ENV=production
15+
116
all: editor serve
217

3-
serve:
4-
npm run dev
18+
build: clean prod
19+
20+
install:
21+
$(PROGRAM) install
522

623
editor:
7-
mvim './src/js-scroll-effect-module.js'
8-
9-
build:
10-
@echo "--------------------"
11-
@echo "js-scroll-effect-module\nbuild..."
12-
@echo "--------------------"
13-
@git status -bs
14-
@echo "--------------------"
15-
rm -rf "./dist/"
16-
@echo "--------------------"
17-
npm run prod
24+
$(VIM) './'
25+
26+
clean:
27+
$(RM) dist
28+
29+
serve:
30+
$(ENV_DEV) $(PROGRAM) run dev
31+
32+
prod:
33+
$(ENV_PROD) $(PROGRAM) run prod
34+
35+
zip:
36+
$(RM) $(ZIP_FOLDER)
37+
$(MK) $(ZIP_FOLDER)
38+
$(CP) dist/js-scroll-effect-module.js examples/index.html $(ZIP_FOLDER)/
39+
sed -i "" "s/..\/dist\//.\//g" "$(ZIP_FOLDER)/index.html"
40+
$(ZIP) $(ZIP_FOLDER)/$(VERSION).zip -r $(ZIP_FOLDER)/*
41+
42+
.PHONY: all build editor serve clean prod zip install

‎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/empty.html‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
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+
28+
<div class="p-use">
29+
<script>
30+
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
31+
elem : '.js-scroll',
32+
firstElem : '.js-scroll--first',
33+
34+
displayRatio : 0.8,
35+
displayReverse : true,
36+
displayRatioReverse: 1.2,
37+
38+
firstDelay : 0,
39+
firstDelaySteps : 100,
40+
41+
throttleInterval : 50,
42+
43+
autoStart : true,
44+
45+
addClassNameActive : 'is-active',
46+
47+
on: {
48+
Scroll: function(top){
49+
console.log('Scroll', top);
50+
document.querySelector('.dev .t1').innerHTML = top;
51+
},
52+
Change: function(item, pos, obj, top){
53+
console.log('Change', item, pos, obj, top);
54+
document.querySelector('.dev .t2').innerHTML = pos;
55+
},
56+
In: function(item, pos, obj, top){
57+
console.log('In', item, pos, obj, top);
58+
},
59+
Out: function(item, pos, obj, top){
60+
console.log('Out', item, pos, obj, top);
61+
}
62+
}
63+
});
64+
</script>
65+
66+
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Update()">要素の情報更新 - ScrollEffectModule.Update()</button></p>
67+
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Refresh()">リフレッシュ - ScrollEffectModule.Refresh()</button></p>
68+
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Clear()">非アクティブ化 - ScrollEffectModule.Clear()</button></p>
69+
70+
</div>
71+
72+
<hr class="mt-4 mb-4">
73+
74+
<div class="p-demo">
75+
<h3 class="">DEMO</h3>
76+
<br><br><br><br><br><br><br><br><br><br><br><br>
77+
<div class="text-center" data-sem-offset="600">
78+
<h2>EffectType : fadein basic</h2>
79+
<p>EffectClassname : .js-scroll__fadein-basic</p>
80+
</div>
81+
<br><br><br><br><br><br><br><br><br><br><br><br>
82+
<div class="text-center">
83+
<h2>EffectType : fadein top</h2>
84+
<p>EffectClassname : .js-scroll__fadein-top</p>
85+
</div>
86+
<br><br><br><br><br><br><br><br><br><br><br><br>
87+
<div class="text-center">
88+
<h2>EffectType : fadein bottom</h2>
89+
<p>EffectClassname : .js-scroll__fadein-bottom</p>
90+
</div>
91+
<br><br><br><br><br><br><br><br><br><br><br><br>
92+
<div class="text-center">
93+
<h2>EffectType : fadein left</h2>
94+
<p>EffectClassname : .js-scroll__fadein-left</p>
95+
</div>
96+
<br><br><br><br><br><br><br><br><br><br><br><br>
97+
<div class="text-center">
98+
<h2>EffectType : fadein right</h2>
99+
<p>EffectClassname : .js-scroll__fadein-right</p>
100+
</div>
101+
<br><br><br><br><br><br><br><br><br><br><br><br>
102+
<div class="text-center">
103+
<h2>EffectType : fadein zoomin</h2>
104+
<p>EffectClassname : .js-scroll__fadein-zoomin</p>
105+
</div>
106+
<br><br><br><br><br><br><br><br><br><br><br><br>
107+
<div class="text-center">
108+
<h2>EffectType : spinin</h2>
109+
<p>EffectClassname : .js-scroll__spinin</p>
110+
</div>
111+
<br><br><br><br><br><br><br><br><br><br><br><br>
112+
</div>
113+
114+
</div>
115+
116+
<div class="dev" style="position: fixed; bottom: 0; left: 0; padding: 10px; background: rgba(0,0,0,0.5); color: #fff;">
117+
<div>スクロール　：　<span class="t1" style="display: inline-block; width: 3em;"></span>[px]</div>
118+
<div>ポジション　：　<span class="t2" style="display: inline-block; width: 3em;"></span></div>
119+
</div>
120+
121+
<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: fixed; 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>
122+
123+
</body>
124+
</html>

‎examples/index.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,8 +155,6 @@ <h3>Advanced Use (Acceleration)</h3>
155155
&lt;/script&gt;</code>
156156
</pre>
157157

158-
<p><a class="btn btn btn-secondary" href="./acceleration.html">デモページへ</a></p>
159-
160158
</div>
161159

162160
<hr class="mt-4 mb-4 js-scroll js-scroll__fadein-bottom">

‎examples/intersect.html‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
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+
24+
<style>
25+
.is-intersect {
26+
}
27+
[data-sem-intersect-item] {
28+
transition: all 0.2s ease 0s;
29+
transform: translateX(20px);
30+
opacity: 0;
31+
}
32+
.is-intersect [data-sem-intersect-item].is-active {
33+
transform: translateX(0);
34+
opacity: 1;
35+
}
36+
37+
38+
.intersect-wrap {
39+
position: relative;
40+
}
41+
.intersect-bg {
42+
position: absolute;
43+
top: 0;
44+
left: 0;
45+
width: 100%;
46+
height: 100vh;
47+
background: url(./bg.jpg) bottom center no-repeat;
48+
background-size: cover;
49+
opacity: 0.4;
50+
}
51+
.is-intersect .intersect-bg {
52+
position: fixed;
53+
}
54+
.is-intersect-over .intersect-bg {
55+
top: auto;
56+
bottom: 0;
57+
}
58+
</style>
59+
</head>
60+
<body style="overflow-x:hidden;">
61+
<div class="container container-fluid mt-4" style="max-width: 100%; padding: 0;">
62+
63+
<h2 class="mb-3">SCROLL EFFECT MODULE</h2>
64+
65+
<p>Add effect at scroll.</p>
66+
67+
<hr class="mt-4 mb-4">
68+
69+
<div class="p-use">
70+
<h3>Advanced Use</h3>
71+
<pre class="prettyprint lang-html">
72+
<code>
73+
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
74+
&lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
75+
&lt;div class=&quot;js-scroll&quot;&gt;&lt;/div&gt;
76+
77+
&lt;script&gt;
78+
&lt;/script&gt;</code>
79+
</pre>
80+
81+
<script>
82+
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
83+
// scroll option
84+
elem : '.js-scroll',
85+
firstElem : '.js-scroll--first',
86+
displayRatio : 0.5,
87+
displayReverse : true,
88+
displayRatioReverse: 0.9,
89+
firstDelay : 0,
90+
firstDelaySteps : 100,
91+
autoStart : true,
92+
addClassNameActive : 'is-active',
93+
94+
// intersect optioon.
95+
throttleInterval : 10,
96+
intersect : true,
97+
addClassNameIntersect : 'is-intersect',
98+
99+
on: {
100+
Scroll: function(top){
101+
// console.log('Scroll', top);
102+
},
103+
Change: function(item, pos, obj, top){
104+
// console.log('Change', item, pos, obj, top);
105+
},
106+
In: function(item, pos, obj, top){
107+
// console.log('In', item, pos, obj, top);
108+
},
109+
Out: function(item, pos, obj, top){
110+
// console.log('Out', item, pos, obj, top);
111+
},
112+
Intersect: function(obj){
113+
// console.log(obj);
114+
}
115+
}
116+
});
117+
</script>
118+
</div>
119+
120+
<hr>
121+
122+
<div class="p-demo">
123+
124+
<h3>DEMO</h3>
125+
<br><br><br><br><br><br><br><br><br><br><br><br>
126+
<br><br><br><br><br><br><br><br><br><br><br><br>
127+
<br><br><br><br><br><br><br><br><br><br><br><br>
128+
<br><br><br><br><br><br><br><br><br><br><br><br>
129+
130+
<div class="js-scroll intersect-wrap" data-sem-slug="test111" style="border: 1px solid rgba(0,0,0,0.5);">
131+
<div class="intersect-bg"></div>
132+
<h2>Effect</h2>
133+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
134+
<div class="js-scroll" data-sem-intersect-item style="border: 1px solid rgba(0,0,0,0.5);">
135+
<p>1</p>
136+
</div>
137+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
138+
<div class="js-scroll" data-sem-intersect-item style="border: 1px solid rgba(0,0,0,0.5);">
139+
<p>2</p>
140+
</div>
141+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
142+
<div class="js-scroll" data-sem-intersect-item style="border: 1px solid rgba(0,0,0,0.5);">
143+
<p>3</p>
144+
</div>
145+
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
146+
</div>
147+
148+
<br><br><br><br><br><br><br><br><br><br><br><br>
149+
<br><br><br><br><br><br><br><br><br><br><br><br>
150+
<br><br><br><br><br><br><br><br><br><br><br><br>
151+
<br><br><br><br><br><br><br><br><br><br><br><br>
152+
<h3>DEMO</h3>
153+
<br><br><br><br><br><br><br><br><br><br><br><br>
154+
<br><br><br><br><br><br><br><br><br><br><br><br>
155+
<br><br><br><br><br><br><br><br><br><br><br><br>
156+
<br><br><br><br><br><br><br><br><br><br><br><br>
157+
<div class="js-scroll js-scroll__fadein-basic text-center" data-sem-slug="test222" style="opacity: 0.5 !important; border: 1px solid rgba(0,0,0,0.5);">
158+
<h2>Effect</h2>
159+
<br><br><br><br><br><br><br><br><br><br><br><br>
160+
<br><br><br><br><br><br><br><br><br><br><br><br>
161+
<br><br><br><br><br><br><br><br><br><br><br><br>
162+
<br><br><br><br><br><br><br><br><br><br><br><br>
163+
</div>
164+
<br><br><br><br><br><br><br><br><br><br><br><br>
165+
<br><br><br><br><br><br><br><br><br><br><br><br>
166+
<br><br><br><br><br><br><br><br><br><br><br><br>
167+
<br><br><br><br><br><br><br><br><br><br><br><br>
168+
</div>
169+
170+
</div>
171+
172+
<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>
173+
174+
</body>
175+
</html>

0 commit comments

Comments
 (0)