Skip to content

Commit 93f4c36

Browse files
yama-devyama-dev
authored
Merge pull request #26 from yama-dev/v0.13.5
V0.13.5
2 parents 00ce446 + 3cdea50 commit 93f4c36

9 files changed

+61
-31
lines changed

‎.env

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
SLUG=js-scroll-effect-module
2-
VERSION=0.13.3
2+
VERSION=0.13.5

‎Makefile

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,6 @@ zip:
3737
$(CP) dist/js-scroll-effect-module.js examples/index.html $(ZIP_FOLDER)/
3838
$(CP) examples/scroll-effect-module.css examples/scroll-effect-module.css $(ZIP_FOLDER)/
3939
sed -i "" "s/..\/dist\//.\//g" "$(ZIP_FOLDER)/index.html"
40-
$(ZIP) $(ZIP_FOLDER)/$(VERSION).zip -r $(ZIP_FOLDER)/*
40+
$(ZIP) $(ZIP_FOLDER)/$(SLUG)_v$(VERSION).zip -r $(ZIP_FOLDER)/*
4141

4242
.PHONY: all build serve clean prod zip install

‎README.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ By using pre-prepared CSS, it is surprisingly easy to add effects that match the
2121

2222
- npm -> [https://www.npmjs.com/package/js-scroll-effect-module](https://www.npmjs.com/package/js-scroll-effect-module)
2323

24-
- Standalone(CDN) -> [https://cdn.jsdelivr.net/gh/yama-dev/[email protected].3/dist/js-scroll-effect-module.js](https://cdn.jsdelivr.net/gh/yama-dev/[email protected].3/dist/js-scroll-effect-module.js)
24+
- Standalone(CDN) -> [https://cdn.jsdelivr.net/gh/yama-dev/[email protected].5/dist/js-scroll-effect-module.js](https://cdn.jsdelivr.net/gh/yama-dev/[email protected].5/dist/js-scroll-effect-module.js)
2525

2626
- Zip -> [yama-dev/js-scroll-effect-module](https://github.com/yama-dev/js-scroll-effect-module/releases/latest)
2727

@@ -44,8 +44,8 @@ import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module';
4444
### Basic Use
4545

4646
``` html
47-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yama-dev/[email protected].3/examples/scroll-effect-module.css">
48-
<script src="https://cdn.jsdelivr.net/gh/yama-dev/[email protected].3/dist/js-scroll-effect-module.js"></script>
47+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yama-dev/[email protected].5/examples/scroll-effect-module.css">
48+
<script src="https://cdn.jsdelivr.net/gh/yama-dev/[email protected].5/dist/js-scroll-effect-module.js"></script>
4949

5050
<div data-scroll></div>
5151

@@ -63,7 +63,7 @@ new SCROLL_EFFECT_MODULE({
6363
### Advanced Use
6464

6565
``` html
66-
<script src="https://cdn.jsdelivr.net/gh/yama-dev/[email protected].3/dist/js-scroll-effect-module.js"></script>
66+
<script src="https://cdn.jsdelivr.net/gh/yama-dev/[email protected].5/dist/js-scroll-effect-module.js"></script>
6767

6868
<div data-scroll data-scroll-name="name-1"></div>
6969

@@ -72,7 +72,7 @@ new SCROLL_EFFECT_MODULE({
7272
<script>
7373
const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
7474
target : '[data-scroll]',
75-
classNameInview : 'is-active',
75+
classNameInview : 'is-scroll-active',
7676
7777
ratio : 0.8, // 判定する比率を指定（ウィンドウ高さを1として指定）
7878
reverse : false, // スクロールを戻した時にクラスを削除するかどうか
@@ -84,6 +84,8 @@ const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
8484
autoStart : true, // 自動でスタートするかどうか
8585
autoStartType : 'ready', // ready, load, scroll
8686
87+
updateResizeAuto : true,
88+
8789
throttleInterval : 5,
8890
8991
on: {

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

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/index.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ <h3>Advanced Use</h3>
7171
&lt;script&gt;
7272
const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
7373
target : &#39;[data-scroll]&#39;,
74-
classNameInview: &#39;is-active&#39;,
74+
classNameInview: &#39;is-scroll-active&#39;,
7575
ratio : 0.8,
7676
ratioReverse : null,
7777
reverse : true,
@@ -121,12 +121,13 @@ <h3>Advanced Use (callback)</h3>
121121
<script>
122122
const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
123123
target: '[data-scroll]',
124-
classNameInview : 'is-active',
124+
classNameInview : 'is-scroll-active',
125125
ratio : 0.5,
126126
ratioReverse : 0.9,
127127
reverse : true,
128128
firstDelay : 100,
129129
autoStart : true,
130+
updateResizeAuto: true,
130131
on: {
131132
Change: function(obj, index, name){
132133
console.log('Change', obj, index, name);

‎examples/scroll-effect-module.css

+7-7
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,42 @@
77
opacity: 0;
88
transition: opacity var(--sem-duration) var(--sem-ease) 0s;
99
}
10-
[data-scroll-type="fadein"].is-active { opacity: 1; }
10+
[data-scroll-type="fadein"].is-scroll-active { opacity: 1; }
1111

1212
[data-scroll-type="zoomin"] {
1313
opacity: 0;
1414
transform: scale(0.9);
1515
transition: all var(--sem-duration) var(--sem-ease) 0s;
1616
}
17-
[data-scroll-type="zoomin"].is-active { opacity: 1; transform: scale(1); }
17+
[data-scroll-type="zoomin"].is-scroll-active { opacity: 1; transform: scale(1); }
1818

1919
[data-scroll-type="fadeinTop"] {
2020
opacity: 0;
2121
transform: translate(0, -30px);
2222
transition: all var(--sem-duration) var(--sem-ease) 0s;
2323
}
24-
[data-scroll-type="fadeinTop"].is-active { opacity: 1; transform: translate(0, 0); }
24+
[data-scroll-type="fadeinTop"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
2525

2626
[data-scroll-type="fadeinBottom"] {
2727
opacity: 0;
2828
transform: translate(0, 30px);
2929
transition: all var(--sem-duration) var(--sem-ease) 0s;
3030
}
31-
[data-scroll-type="fadeinBottom"].is-active { opacity: 1; transform: translate(0, 0); }
31+
[data-scroll-type="fadeinBottom"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
3232

3333
[data-scroll-type="fadeinLeft"] {
3434
opacity: 0;
3535
transform: translate(-80%, 0);
3636
transition: all var(--sem-duration) var(--sem-ease) 0s;
3737
}
38-
[data-scroll-type="fadeinLeft"].is-active { opacity: 1; transform: translate(0, 0); }
38+
[data-scroll-type="fadeinLeft"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
3939

4040
[data-scroll-type="fadeinRight"] {
4141
opacity: 0;
4242
transform: translate(80%, 0);
4343
transition: all var(--sem-duration) var(--sem-ease) 0s;
4444
}
45-
[data-scroll-type="fadeinRight"].is-active { opacity: 1; transform: translate(0, 0); }
45+
[data-scroll-type="fadeinRight"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
4646

4747
[data-scroll-type="spinin"] {
4848
opacity: 0;
@@ -51,5 +51,5 @@
5151
backface-visibility: hidden;
5252
transition: all var(--sem-duration) var(--sem-ease) 0s;
5353
}
54-
[data-scroll-type="spinin"].is-active { opacity: 1; transform: translate(0, 0) rotate3d(1, 0, 1, 0); }
54+
[data-scroll-type="spinin"].is-scroll-active { opacity: 1; transform: translate(0, 0) rotate3d(1, 0, 1, 0); }
5555

‎package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "js-scroll-effect-module",
3-
"version": "0.13.3",
3+
"version": "0.13.5",
44
"description": "Add effect at scroll.",
55
"keywords": [
66
"scroll",
@@ -40,8 +40,8 @@
4040
"@babel/register": "^7.14.5",
4141
"babel-loader": "^8.2.2",
4242
"browser-sync": "^2.27.5",
43-
"eslint": "^7.32.0",
44-
"eslint-loader": "^2.1.1",
43+
"eslint": "^8.57.0",
44+
"eslint-webpack-plugin": "^4.1.0",
4545
"mocha": "^9.0.3",
4646
"npm-run-all": "^4.1.5",
4747
"webpack": "^5.48.0",

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

+31-4
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default class SCROLL_EFFECT_MODULE {
2323
parent : 'window',
2424
body : 'body',
2525

26-
classNameInview : 'is-active',
26+
classNameInview : 'is-scroll-active',
2727

2828
ratio : 0.8,
2929
ratioReverse : null,
@@ -37,6 +37,8 @@ export default class SCROLL_EFFECT_MODULE {
3737

3838
throttleInterval : 5,
3939

40+
updateResizeAuto : true,
41+
4042
customVarNameRatio : null, // '--sem-scroll-ratio'
4143

4244
on: {
@@ -101,8 +103,19 @@ export default class SCROLL_EFFECT_MODULE {
101103
if(this.timer) clearTimeout(this.timer);
102104

103105
// for Resize-Event
106+
let currentWidth = window.innerWidth;
104107
this.state.$parent.addEventListener('resize', () => {
105-
this.Start();
108+
// not resize
109+
if (currentWidth == window.innerWidth) {
110+
return;
111+
}
112+
113+
// update window width
114+
currentWidth = window.innerWidth;
115+
116+
if(this.config.updateResizeAuto){
117+
this.Start();
118+
}
106119
});
107120

108121
if(this.config.autoStartType === 'ready'){
@@ -304,10 +317,24 @@ export default class SCROLL_EFFECT_MODULE {
304317
_item.changing = false;
305318

306319
// アクティブの増減によってcallbackに渡すitemを変更
307-
let _item_fix = _type === 'down' ? _item : _item_pre;
320+
let _item_fix = null;
321+
if(_type === 'down'){
322+
_item_fix = _item;
323+
} else {
324+
if(_item_pre){
325+
_item_fix = _item_pre;
326+
} else {
327+
_item_fix = _item;
328+
}
329+
}
308330

309331
// Changeコールバック関数の呼び出し
310-
this.callCallback(this.config.on.Change, _item_fix, _item_fix.index, _item_fix.dataset[this.getDatasetKey(this.config.targetDataName)]);
332+
this.callCallback(
333+
this.config.on.Change,
334+
_item_fix,
335+
_item_fix ? _item_fix.index : 0,
336+
_item_fix ? _item_fix.dataset[this.getDatasetKey(this.config.targetDataName)] : {},
337+
);
311338
}
312339
}
313340
}

‎webpack.config.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ if(!env) process.exit(1);
88

99
const webpack = require('webpack');
1010
const TerserPlugin = require('terser-webpack-plugin');
11+
const ESLintPlugin = require('eslint-webpack-plugin');
1112

1213
const webpackPlugEnv = new webpack.EnvironmentPlugin({
1314
DEBUG: false,
@@ -28,12 +29,6 @@ const config = {
2829
},
2930
module: {
3031
rules: [
31-
{
32-
enforce: 'pre',
33-
test: /\.(js)$/,
34-
exclude: /node_modules/,
35-
loader: 'eslint-loader',
36-
},
3732
{
3833
test: /\.js$/,
3934
exclude: /node_modules[///](?!(@yama-dev)\/).*/,
@@ -56,6 +51,11 @@ const config = {
5651
target: ['web', 'es5'],
5752
plugins: [
5853
webpackPlugEnv,
54+
new ESLintPlugin({
55+
cache: true,
56+
extensions: ['js'],
57+
fix: false,
58+
}),
5959
],
6060
optimization: {
6161
minimizer: [

0 commit comments

Comments
 (0)