From 01e42748c772a87938dbd027904236f9cd300610 Mon Sep 17 00:00:00 2001 From: yama-dev Date: Fri, 6 Aug 2021 10:39:14 +0900 Subject: [PATCH 1/9] update version text --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6856925..904f4ce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "js-scroll-effect-module", - "version": "0.10.1", + "version": "0.11.0", "description": "Add effect at scroll.", "keywords": [ "scroll", From d62df1982b2d104fec59d094a1bd17656f957975 Mon Sep 17 00:00:00 2001 From: yama-dev Date: Fri, 6 Aug 2021 10:39:39 +0900 Subject: [PATCH 2/9] update npm package --- package.json | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 904f4ce..ce6ed11 100644 --- a/package.json +++ b/package.json @@ -35,20 +35,18 @@ "email": "tatsuya.yamamoto69@gmail.com" }, "devDependencies": { - "@babel/cli": "^7.4.4", - "@babel/core": "^7.4.5", - "@babel/plugin-transform-object-assign": "^7.2.0", - "@babel/preset-env": "^7.4.5", - "@babel/register": "^7.4.4", - "babel-loader": "^8.0.6", - "browser-sync": "^2.26.7", - "cross-env": "^5.2.0", - "eslint": "^5.16.0", + "@babel/cli": "^7.14.8", + "@babel/core": "^7.14.8", + "@babel/preset-env": "^7.14.9", + "@babel/register": "^7.14.5", + "babel-loader": "^8.2.2", + "browser-sync": "^2.27.5", + "eslint": "^7.32.0", "eslint-loader": "^2.1.1", - "mocha": "^6.1.4", - "npm-run-all": "^4.1.2", "webpack": "^4.34.0", "webpack-cli": "^3.3.4" + "mocha": "^9.0.3", + "npm-run-all": "^4.1.5", }, "dependencies": { "@yama-dev/js-dom": "^0.1.0" From b7319b5795e2a9ee46a63ec39e259d78bf2bfab0 Mon Sep 17 00:00:00 2001 From: yama-dev Date: Fri, 6 Aug 2021 10:40:09 +0900 Subject: [PATCH 3/9] update webpack version --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ce6ed11..f46764b 100644 --- a/package.json +++ b/package.json @@ -43,10 +43,10 @@ "browser-sync": "^2.27.5", "eslint": "^7.32.0", "eslint-loader": "^2.1.1", - "webpack": "^4.34.0", - "webpack-cli": "^3.3.4" "mocha": "^9.0.3", "npm-run-all": "^4.1.5", + "webpack": "^5.48.0", + "webpack-cli": "^4.7.2" }, "dependencies": { "@yama-dev/js-dom": "^0.1.0" From afb6957bb3b8d9422a95af2a5bb212bca8b9e588 Mon Sep 17 00:00:00 2001 From: yama-dev Date: Fri, 6 Aug 2021 10:40:25 +0900 Subject: [PATCH 4/9] adjust package.json npm script --- package.json | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index f46764b..34112f3 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,11 @@ "main": "./dist/js-scroll-effect-module.js", "scripts": { "start": "npm install && npm run dev", - "dev": "cross-env NODE_ENV=\"development\" npm-run-all -p build:develop server:develop", - "server:develop": "browser-sync start --server ./ --directory ./sample --files **/*.css **/*.js **/*.html", - "build:develop": "webpack --progress --colors --watch", - "prod": "cross-env NODE_ENV=\"production\" npm-run-all -p build:production server:production", - "server:production": "browser-sync start --server ./ --directory ./sample --files **/*.css **/*.js **/*.html", - "build:production": "webpack --progress --colors --watch", + "dev": "npm-run-all -p webpack:develop server", + "prod": "npm-run-all -p webpack:build", + "server": "browser-sync start --server ./ --directory ./examples --files **/*.css **/*.js **/*.html", + "webpack:develop": "webpack --progress --color --watch", + "webpack:build": "webpack --mode=production --progress --color", "test": "mocha --require @babel/register" }, "repository": { @@ -49,7 +48,7 @@ "webpack-cli": "^4.7.2" }, "dependencies": { - "@yama-dev/js-dom": "^0.1.0" + "@yama-dev/js-dom": "^0.2.1" }, "eslintConfig": { "env": { From f204bba1cb7cc16197a45e0e450085c85297056a Mon Sep 17 00:00:00 2001 From: yama-dev Date: Fri, 6 Aug 2021 10:40:51 +0900 Subject: [PATCH 5/9] adjust webpack setting --- webpack.config.js | 39 ++++++++++++++++++++++++--------------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 4e116a2..fb505f7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,25 +1,19 @@ const pkg = require('./package.json'); -const comment = `@yama-dev/${pkg.name} Version ${pkg.version} Repository ${pkg.repository.url} Copyright ${pkg.author} Licensed ${pkg.license}`; +const comment = `/*! @yama-dev/${pkg.name} Version ${pkg.version} Repository ${pkg.repository.url} Copyright ${pkg.author} Licensed ${pkg.license} */`; const env = process.env.NODE_ENV; +if(!env) process.exit(1); + const webpack = require('webpack'); +const TerserPlugin = require('terser-webpack-plugin'); const webpackPlugEnv = new webpack.EnvironmentPlugin({ - NODE_ENV: 'development', DEBUG: false, VERSION: pkg.version }); -const webpackPlugBnr = new webpack.BannerPlugin({ - banner: comment, -}); - -const babelPlugin = [ - '@babel/plugin-transform-object-assign' -]; - const config = { mode: env || 'development', entry: { @@ -42,7 +36,7 @@ const config = { }, { test: /\.js$/, - exclude: /node_modules[//\/](?!(@yama\-dev)\/).*/, + exclude: /node_modules[///](?!(@yama-dev)\/).*/, use: { loader: 'babel-loader', options: { @@ -53,17 +47,32 @@ const config = { modules: false } ] - ], - plugins: babelPlugin + ] } } } ] }, + target: ['web', 'es5'], plugins: [ webpackPlugEnv, - webpackPlugBnr - ] + ], + optimization: { + minimizer: [ + new TerserPlugin({ + extractComments: false, + terserOptions: { + output: { + preamble: comment, + comments: false, + }, + compress: { + drop_console: true + } + }, + }), + ], + } }; module.exports = config; From f1d1e6579a868e7e160a4be096f9c97915797ea4 Mon Sep 17 00:00:00 2001 From: yama-dev Date: Fri, 6 Aug 2021 10:42:09 +0900 Subject: [PATCH 6/9] adjsut make file --- .env | 2 ++ Makefile | 51 ++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 40 insertions(+), 13 deletions(-) create mode 100644 .env mode change 100644 => 100755 Makefile diff --git a/.env b/.env new file mode 100644 index 0000000..bd6fa22 --- /dev/null +++ b/.env @@ -0,0 +1,2 @@ +SLUG=js-scroll-effect-module +VERSION=0.11.0 diff --git a/Makefile b/Makefile old mode 100644 new mode 100755 index 8a1e086..cf9dd22 --- a/Makefile +++ b/Makefile @@ -1,17 +1,42 @@ +include .env + +VIM := mvim + +PROGRAM := npm +RM := rm -rf +MK := mkdir +CP := cp +ZIP := zip + +ZIP_FOLDER := _v$(VERSION) + +ENV_DEV := NODE_ENV=development +ENV_PROD := NODE_ENV=production + all: editor serve -serve: - npm run dev +build: clean prod + +install: + $(PROGRAM) install editor: - mvim './src/js-scroll-effect-module.js' - -build: - @echo "--------------------" - @echo "js-scroll-effect-module\nbuild..." - @echo "--------------------" - @git status -bs - @echo "--------------------" - rm -rf "./dist/" - @echo "--------------------" - npm run prod + $(VIM) './' + +clean: + $(RM) dist + +serve: + $(ENV_DEV) $(PROGRAM) run dev + +prod: + $(ENV_PROD) $(PROGRAM) run prod + +zip: + $(RM) $(ZIP_FOLDER) + $(MK) $(ZIP_FOLDER) + $(CP) dist/js-scroll-effect-module.js examples/index.html $(ZIP_FOLDER)/ + sed -i "" "s/..\/dist\//.\//g" "$(ZIP_FOLDER)/index.html" + $(ZIP) $(ZIP_FOLDER)/$(VERSION).zip -r $(ZIP_FOLDER)/* + +.PHONY: all build editor serve clean prod zip install From 471760bfda397c318cab7baf2c91089fe27c0c23 Mon Sep 17 00:00:00 2001 From: yama-dev Date: Fri, 6 Aug 2021 10:42:20 +0900 Subject: [PATCH 7/9] build --- dist/js-scroll-effect-module.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/js-scroll-effect-module.js b/dist/js-scroll-effect-module.js index 09e43ca..b2f6fa2 100644 --- a/dist/js-scroll-effect-module.js +++ b/dist/js-scroll-effect-module.js @@ -1,2 +1,2 @@ -/*! @yama-dev/js-scroll-effect-module Version 0.10.1 Repository https://github.com/yama-dev/js-scroll-effect-module Copyright yama-dev Licensed MIT */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.SCROLL_EFFECT_MODULE=e():t.SCROLL_EFFECT_MODULE=e()}(window,(function(){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";function i(t){try{return t instanceof HTMLElement}catch(t){return!1}}function o(t){if(!t)return!1;var e;if(!Array.isArray(t)&&!t.length||function(t){try{return"string"==typeof t}catch(t){return!1}}(t))e=i(t)?Array(t):Array.prototype.slice.call(document.querySelectorAll(t));else{if(!i(t[0]))return!1;e=Array.prototype.slice.call(t)}return 0===e.length&&(e=null),e}function s(t,e){return i(t)?t.classList.contains(e):document.querySelector(t).classList.contains(e)}function a(t,e){var n=o(t);if(!n)return!1;n.map((function(t){t.classList.add(e)}))}function r(t,e){var n=o(t);if(!n)return!1;n.map((function(t){t.classList.remove(e)}))}function c(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,i)}return n}function l(t){for(var e=1;e0&&void 0!==arguments[0]?arguments[0]:{};u(this,t),this.Version="0.10.1",this.state={NumScrolltopPre:window.pageYOffset,NumScrolltop:window.pageYOffset,PosList:[],PosListFixPre:[],PosListFix:[],PosListNoneFix:[],flg:{intersectChanged:!1}};var n={elem:null,firstElem:null,displayRatio:.8,displayReverse:!1,displayRatioReverse:null,firstDelay:10,firstDelaySteps:100,throttleInterval:50,addClassNameActive:"is-active",autoStart:!0,intersect:!1,addClassNameIntersect:"is-intersect",addClassNameIntersectOver:"is-intersect-over",on:{Scroll:null,Change:null,In:null,Out:null,Intersect:null}};this.config=l(l({},n),e),this.config.displayRatioReverse?this.config.displayRatioReversen.pos?("load"===t&&n.count++,n.active=!0,e.state.PosListFix.push(n)):(n.active=!1,e.state.PosListNoneFix.push(n))),e.config.displayRatio!==e.config.displayRatioReverse&&(e.state.NumScrolltop+e.NumWindowHeight*e.config.displayRatio>n.pos?("load"===t&&n.count++,n.active=!0,e.state.PosListFix.push(n)):e.state.NumScrolltop+e.NumWindowHeight*e.config.displayRatioReverse>n.pos?n.active?e.state.PosListFix.push(n):e.state.PosListNoneFix.push(n):(n.active=!1,e.state.PosListNoneFix.push(n))),e.config.intersect&&(e.state.NumScrolltop>n.pos?e.state.NumScrolltop+e.NumWindowHeight>n.pos+n.height?n.intersect&&(e.state.flg.intersectChanged=!0,n.intersect=!1,n.intersectover=!0):n.intersect||(e.state.flg.intersectChanged=!0,n.intersect=!0,n.intersectover=!1):n.intersect&&(e.state.flg.intersectChanged=!0,n.intersect=!1,n.intersectover=!1))})),"load"===t?this.ActionChangeFirst():"scroll"===t&&this.state.PosListFixPre.length!==this.state.PosListFix.length&&this._actionChange(),this.config.intersect&&this.state.flg.intersectChanged&&(this.state.flg.intersectChanged=!1,this._actionChangeIntersect()),this.config.on.Scroll&&"function"==typeof this.config.on.Scroll&&this.config.on.Scroll(this.state.NumScrolltop),this.state.NumScrolltopPre=this.state.NumScrolltop,this.state.PosListFixPre=this.state.PosListFix}},{key:"ActionChangeFirst",value:function(){var t=this,e=0;this.$elemItemFirst?function n(){setTimeout((function(){t.config.addClassNameActive&&a(t.$elemItemFirst[e],t.config.addClassNameActive),++e0&&void 0!==arguments[0]?arguments[0]:{};f(this,t),this.Version="0.11.0",this.state={NumScrolltopPre:window.pageYOffset,NumScrolltop:window.pageYOffset,PosList:[],PosListFixPre:[],PosListFix:[],PosListNoneFix:[],flg:{intersectChanged:!1}};var i={elem:null,firstElem:null,displayRatio:.8,displayReverse:!1,displayRatioReverse:null,firstDelay:10,firstDelaySteps:100,throttleInterval:50,addClassNameActive:"is-active",autoStart:!0,intersect:!1,addClassNameIntersect:"is-intersect",addClassNameIntersectOver:"is-intersect-over",on:{Scroll:null,Change:null,In:null,Out:null,Intersect:null}};this.config=r(r({},i),e),this.config.displayRatioReverse?this.config.displayRatioReversei.pos?("load"===t&&i.count++,i.active=!0,e.state.PosListFix.push(i)):(i.active=!1,e.state.PosListNoneFix.push(i))),e.config.displayRatio!==e.config.displayRatioReverse&&(e.state.NumScrolltop+e.NumWindowHeight*e.config.displayRatio>i.pos?("load"===t&&i.count++,i.active=!0,e.state.PosListFix.push(i)):e.state.NumScrolltop+e.NumWindowHeight*e.config.displayRatioReverse>i.pos?i.active?e.state.PosListFix.push(i):e.state.PosListNoneFix.push(i):(i.active=!1,e.state.PosListNoneFix.push(i))),e.config.intersect&&(e.state.NumScrolltop>i.pos?e.state.NumScrolltop+e.NumWindowHeight>i.pos+i.height?i.intersect&&(e.state.flg.intersectChanged=!0,i.intersect=!1,i.intersectover=!0):i.intersect||(e.state.flg.intersectChanged=!0,i.intersect=!0,i.intersectover=!1):i.intersect&&(e.state.flg.intersectChanged=!0,i.intersect=!1,i.intersectover=!1))})),"load"===t?this.ActionChangeFirst():"scroll"===t&&this.state.PosListFixPre.length!==this.state.PosListFix.length&&this._actionChange(),this.config.intersect&&this.state.flg.intersectChanged&&(this.state.flg.intersectChanged=!1,this._actionChangeIntersect()),this.config.on.Scroll&&"function"==typeof this.config.on.Scroll&&this.config.on.Scroll(this.state.NumScrolltop),this.state.NumScrolltopPre=this.state.NumScrolltop,this.state.PosListFixPre=this.state.PosListFix}},{key:"ActionChangeFirst",value:function(){var t=this,e=0;this.$elemItemFirst?function i(){setTimeout((function(){t.config.addClassNameActive&&o(t.$elemItemFirst[e],t.config.addClassNameActive),++e Date: Fri, 6 Aug 2021 10:43:59 +0900 Subject: [PATCH 8/9] adjust sample html --- examples/empty.html | 124 ++++++++++++++++++++++++++++ examples/intersect.html | 175 ++++++++++++++++++++++++++++++++++++++++ examples/simple.html | 161 +++++++++++++----------------------- 3 files changed, 354 insertions(+), 106 deletions(-) create mode 100644 examples/empty.html create mode 100644 examples/intersect.html diff --git a/examples/empty.html b/examples/empty.html new file mode 100644 index 0000000..bed0d46 --- /dev/null +++ b/examples/empty.html @@ -0,0 +1,124 @@ + + + + + + js-scroll-effect-module | yama-dev + + + + + + + + + + + + + +
+ + +
+ + +

+

+

+ +
+ +
+ +
+

DEMO

+











+
+

EffectType : fadein basic

+

EffectClassname : .js-scroll__fadein-basic

+
+











+
+

EffectType : fadein top

+

EffectClassname : .js-scroll__fadein-top

+
+











+
+

EffectType : fadein bottom

+

EffectClassname : .js-scroll__fadein-bottom

+
+











+
+

EffectType : fadein left

+

EffectClassname : .js-scroll__fadein-left

+
+











+
+

EffectType : fadein right

+

EffectClassname : .js-scroll__fadein-right

+
+











+
+

EffectType : fadein zoomin

+

EffectClassname : .js-scroll__fadein-zoomin

+
+











+
+

EffectType : spinin

+

EffectClassname : .js-scroll__spinin

+
+











+
+ +
+ +
+
スクロール　：　[px]
+
ポジション　：　
+
+ + + + + diff --git a/examples/intersect.html b/examples/intersect.html new file mode 100644 index 0000000..46edd1f --- /dev/null +++ b/examples/intersect.html @@ -0,0 +1,175 @@ + + + + + + js-scroll-effect-module | yama-dev + + + + + + + + + + + + + + + +
+ +

SCROLL EFFECT MODULE

+ +

Add effect at scroll.

+ +
+ +
+

Advanced Use

+ 
+      
+      <script src="./js-scroll-effect-module.js"></script>
+      <link rel="stylesheet" href="./scroll-effect-module.css">
+      <div class="js-scroll"></div>
+
+      <script>
+      </script>
+
+ + +
+ +
+ +
+ +

DEMO

+











+











+











+











+ +
+
+

Effect

+























+
+

1

+
+























+
+

2

+
+























+
+

3

+
+























+
+ +











+











+











+











+

DEMO

+











+











+











+











+
+

Effect

+











+











+











+











+
+











+











+











+











+
+ +
+ + + + + diff --git a/examples/simple.html b/examples/simple.html index 46edd1f..20c536c 100644 --- a/examples/simple.html +++ b/examples/simple.html @@ -20,156 +20,105 @@ gtag('js', new Date()); gtag('config', 'UA-91619969-3'); - - -
- -

SCROLL EFFECT MODULE

- -

Add effect at scroll.

- -
+
-
-

Advanced Use

- 
-      
-      <script src="./js-scroll-effect-module.js"></script>
-      <link rel="stylesheet" href="./scroll-effect-module.css">
-      <div class="js-scroll"></div>
-
-      <script>
-      </script>
-
+
+ +

+

+

+
-
+
- -

DEMO

-











+

DEMO













-











-











- -
-
-

Effect

-























-
-

1

-
-























-
-

2

-
-























-
-

3

-
-























+
+

EffectType : fadein basic

+

EffectClassname : .js-scroll__fadein-basic

- -











-











-











-











-

DEMO

-























+
+

EffectType : fadein top

+

EffectClassname : .js-scroll__fadein-top

+












+
+

EffectType : fadein bottom

+

EffectClassname : .js-scroll__fadein-bottom

+












-
-

Effect

-











-











-











-











+
+

EffectType : fadein left

+

EffectClassname : .js-scroll__fadein-left













+
+

EffectType : fadein right

+

EffectClassname : .js-scroll__fadein-right

+












+
+

EffectType : fadein zoomin

+

EffectClassname : .js-scroll__fadein-zoomin

+












+
+

EffectType : spinin

+

EffectClassname : .js-scroll__spinin

+












- +
+
スクロール　：　[px]
+
ポジション　：　
+
+ + From 5872b4864fe2be40c2dc89655382f313728e3bae Mon Sep 17 00:00:00 2001 From: yama-dev Date: Fri, 6 Aug 2021 10:44:57 +0900 Subject: [PATCH 9/9] adjust html --- examples/index.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/examples/index.html b/examples/index.html index 201cd3b..0671a23 100644 --- a/examples/index.html +++ b/examples/index.html @@ -155,8 +155,6 @@

Advanced Use (Acceleration)

</script> -

デモページへ

-