Skip to content

Commit 302f305

Browse files
yama-devyama-dev
authored
Merge pull request #20 from yama-dev/v0.10.1
V0.10.1
2 parents 1883f72 + 02f91b8 commit 302f305

File tree

9 files changed

+211
-202
lines changed

9 files changed

+211
-202
lines changed

‎Makefile‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
all: editor serve
2+
3+
serve:
4+
npm run dev
5+
6+
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

‎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: 0 additions & 90 deletions
This file was deleted.

‎examples/bg.jpg‎

460 KB
Loading

‎examples/floor-nav.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<div class="row mt-3">
1919
<div class="col-md-1"></div>
2020
<div class="col-md-10">
21-
<h2 class="mb-3">SCROLL EFFECT MODULE v0.1.2</h2>
21+
<h2 class="mb-3">SCROLL EFFECT MODULE</h2>
2222

2323
<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>
2424
<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>

‎examples/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
<body style="overflow-x:hidden;">
2525
<div class="container mt-4">
2626

27-
<h2 class="mb-3">SCROLL EFFECT MODULE v0.9.2</h2>
27+
<h2 class="mb-3">SCROLL EFFECT MODULE</h2>
2828

2929
<p>Add effect at scroll.</p>
3030

@@ -164,7 +164,7 @@ <h3>Advanced Use (Acceleration)</h3>
164164
<div class="p-demo">
165165
<h3 class="js-scroll js-scroll__fadein-bottom">DEMO</h3>
166166
<br><br><br><br><br><br><br><br><br><br><br><br>
167-
<div class="js-scroll js-scroll__fadein-basic text-center">
167+
<div class="js-scroll js-scroll__fadein-basic text-center" data-sem-offset="600">
168168
<h2>EffectType : fadein basic</h2>
169169
<p>EffectClassname : .js-scroll__fadein-basic</p>
170170
</div>

‎examples/simple.html‎

Lines changed: 79 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,45 @@
2020
gtag('js', new Date());
2121
gtag('config', 'UA-91619969-3');
2222
</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>
2359
</head>
2460
<body style="overflow-x:hidden;">
25-
<div class="container mt-4">
61+
<div class="container container-fluid mt-4" style="max-width: 100%; padding: 0;">
2662

2763
<h2 class="mb-3">SCROLL EFFECT MODULE</h2>
2864

@@ -39,54 +75,27 @@ <h3>Advanced Use</h3>
3975
&lt;div class=&quot;js-scroll&quot;&gt;&lt;/div&gt;
4076

4177
&lt;script&gt;
42-
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
43-
elem : &#039;.js-scroll&#039;,
44-
firstElem : &#039;.js-scroll--first&#039;,
45-
46-
displayRatio : 0.8,
47-
displayReverse : true,
48-
49-
firstDelay : 0,
50-
firstDelaySteps : 100,
51-
52-
autoStart : true,
53-
54-
addClassNameActive : &#039;is-active&#039;,
55-
56-
on: {
57-
Scroll: function(top){
58-
console.log(&#039;Scroll&#039;, top);
59-
},
60-
Change: function(item, pos, obj, top){
61-
console.log(&#039;Change&#039;, item, pos, obj, top);
62-
},
63-
In: function(item, pos, obj, top){
64-
console.log(&#039;In&#039;, item, pos, obj, top);
65-
},
66-
Out: function(item, pos, obj, top){
67-
console.log(&#039;Out&#039;, item, pos, obj, top);
68-
}
69-
}
70-
});
7178
&lt;/script&gt;</code>
7279
</pre>
7380

7481
<script>
7582
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
83+
// scroll option
7684
elem : '.js-scroll',
7785
firstElem : '.js-scroll--first',
78-
7986
displayRatio : 0.5,
8087
displayReverse : true,
8188
displayRatioReverse: 0.9,
82-
8389
firstDelay : 0,
8490
firstDelaySteps : 100,
85-
8691
autoStart : true,
87-
8892
addClassNameActive : 'is-active',
8993

94+
// intersect optioon.
95+
throttleInterval : 10,
96+
intersect : true,
97+
addClassNameIntersect : 'is-intersect',
98+
9099
on: {
91100
Scroll: function(top){
92101
// console.log('Scroll', top);
@@ -99,49 +108,58 @@ <h3>Advanced Use</h3>
99108
},
100109
Out: function(item, pos, obj, top){
101110
// console.log('Out', item, pos, obj, top);
111+
},
112+
Intersect: function(obj){
113+
// console.log(obj);
102114
}
103115
}
104116
});
105117
</script>
106-
107-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Update()">要素の情報更新 - ScrollEffectModule.Update()</button></p>
108-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Refresh()">リフレッシュ - ScrollEffectModule.Refresh()</button></p>
109-
<p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Clear()">非アクティブ化 - ScrollEffectModule.Clear()</button></p>
110-
111118
</div>
112119

113120
<hr>
114121

115-
<div class="p-use">
116-
<h3>Advanced Use (Acceleration)</h3>
117-
<pre class="prettyprint lang-html">
118-
<code>
119-
&lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
120-
&lt;script&gt;
121-
var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
122-
acceleration : true,
123-
on: {
124-
Acceleration: function(num){
125-
console.log(&#039;Acceleration&#039;, num);
126-
}
127-
}
128-
});
129-
&lt;/script&gt;</code>
130-
</pre>
122+
<div class="p-demo">
131123

132-
</div>
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>
133129

134-
<hr>
135-
<div class="p-demo">
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>
136147

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>
137152
<h3>DEMO</h3>
138153
<br><br><br><br><br><br><br><br><br><br><br><br>
139154
<br><br><br><br><br><br><br><br><br><br><br><br>
140155
<br><br><br><br><br><br><br><br><br><br><br><br>
141156
<br><br><br><br><br><br><br><br><br><br><br><br>
142-
<div class="js-scroll js-scroll__fadein-basic text-center">
143-
<h2>EffectType : fadein basic</h2>
144-
<p>EffectClassname : .js-scroll__fadein-basic</p>
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>
145163
</div>
146164
<br><br><br><br><br><br><br><br><br><br><br><br>
147165
<br><br><br><br><br><br><br><br><br><br><br><br>

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-scroll-effect-module",
3-
"version": "0.9.2",
3+
"version": "0.10.1",
44
"description": "Add effect at scroll.",
55
"keywords": [
66
"scroll",
@@ -17,11 +17,11 @@
1717
"license": "MIT",
1818
"main": "./dist/js-scroll-effect-module.js",
1919
"scripts": {
20-
"start": "npm install && npm run develop",
21-
"develop": "cross-env NODE_ENV=\"development\" npm-run-all -p build:develop server:develop",
20+
"start": "npm install && npm run dev",
21+
"dev": "cross-env NODE_ENV=\"development\" npm-run-all -p build:develop server:develop",
2222
"server:develop": "browser-sync start --server ./ --directory ./sample --files **/*.css **/*.js **/*.html",
2323
"build:develop": "webpack --progress --colors --watch",
24-
"production": "cross-env NODE_ENV=\"production\" npm-run-all -p build:production server:production",
24+
"prod": "cross-env NODE_ENV=\"production\" npm-run-all -p build:production server:production",
2525
"server:production": "browser-sync start --server ./ --directory ./sample --files **/*.css **/*.js **/*.html",
2626
"build:production": "webpack --progress --colors --watch",
2727
"test": "mocha --require @babel/register"

0 commit comments

Comments
 (0)