From caa3314f60130572232348f0ec1872fb0d531a68 Mon Sep 17 00:00:00 2001 From: yama-dev Date: Wed, 11 Jul 2018 21:19:33 +0900 Subject: [PATCH 1/4] admin: adjust version text. --- dist/js-scroll-effect-module.js | 4 ++-- package.json | 6 +++--- sample/scroll-effect-module.css | 2 +- src/js-scroll-effect-module.js | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/dist/js-scroll-effect-module.js b/dist/js-scroll-effect-module.js index a599b63..7eec2d8 100644 --- a/dist/js-scroll-effect-module.js +++ b/dist/js-scroll-effect-module.js @@ -2,9 +2,9 @@ /*! * JS SCROLL EFFECT MODULE (JavaScript Library) * js-scroll-effect-module - * versoin 0.1.1 + * versoin 0.1.2 * Repository https://github.com/yama-dev/js-scroll-effect-module * Copyright yama-dev * Licensed under the MIT license. */ -Element.prototype.hasClass=function(e){return this.className.split(" ").indexOf(e)>=0},Element.prototype.addClass=function(e){if(!this.hasClass(e)){var t=this.className.split(" ");t.push(e),this.className=t.join(" ")}return this},Element.prototype.removeClass=function(e){var t=this.className.split(" "),i=t.indexOf(e);return i>=0&&(t.splice(i,1),this.className=t.join(" ")),this},Element.prototype.toggleClass=function(e){this.hasClass(e)?this.removeClass(e):this.addClass(e)};var n=function(){function e(t){var i=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.Version="0.1.0",this.CurrentUrl=location.href,this.Config={elem:t.elem,displayRatio:t.displayRatio||.7,displayReverse:t.displayReverse||!1,firstElem:t.firstElem||null,firstElemDelayTime:t.firstElemDelayTime||0,firstDelayTime:t.firstDelayTime||300,loadDelayTime:t.loadDelayTime||0,addClassNameLoaded:t.addClassNameLoaded||"is-loaded",addClassNameActive:t.addClassNameActive||"is-active"},this.ElemList=new Array,this.ElemListFix=new Array,this.ElemListNoneFix=new Array,-1===this.CurrentUrl.search(/localhost/)&&-1===this.CurrentUrl.search(/192.168/)||this.DebugMode(),document.addEventListener("DOMContentLoaded",function(e){i.CacheElement(),i.BindEvent()})}return s(e,[{key:"DebugMode",value:function(){console.log(this)}},{key:"BindEvent",value:function(){var e=this,t=this;window.addEventListener("load",function(i){setTimeout(function(){setTimeout(function(){e.UpdateDom(),e.JudgmentScrollEffect("load")},e.Config.firstDelayTime)},t.Config.loadDelayTime)}),window.addEventListener("resize",function(t){e.UpdateDom()}),window.addEventListener("scroll",function(e){t.JudgmentScrollEffect("scroll")})}},{key:"CacheElement",value:function(){this.$elemItem=document.querySelectorAll(this.Config.elem)?document.querySelectorAll(this.Config.elem):document.createElement("div"),this.$elemFirstItem=document.querySelectorAll(this.Config.firstElem)?document.querySelectorAll(this.Config.firstElem):document.createElement("div")}},{key:"CacheElementSize",value:function(){this.NumWindowHeight=window.innerHeight}},{key:"SetDom",value:function(){var e=this,t=this;this.ElemList=[],this.NumScrolltop=window.pageYOffset;var i=Array.prototype.slice.call(this.$elemItem);i&&i.forEach(function(i,s){t.ElemList.push(i.getBoundingClientRect().top+e.NumScrolltop)})}},{key:"UpdateDom",value:function(){this.CacheElement(),this.CacheElementSize(),this.SetDom()}},{key:"Refresh",value:function(){this.CacheElement(),this.CacheElementSize(),this.SetDom();for(var e=0;ethis.ElemList[t]&&(this.ElemListFix.push(t),0);this.ActionAddClassFirst()}else if("scroll"==e){for(var i=0;ithis.ElemList[i]?(this.ElemListFix.push(i),0):this.ElemListNoneFix.push(i);this.ActionAddClass()}}},{key:"ActionAddClassFirst",value:function(){var e=this,t=0;this.$elemFirstItem.length?function i(){setTimeout(function(){e.$elemFirstItem[t].addClass(e.Config.addClassNameActive),++t=0},Element.prototype.addClass=function(e){if(!this.hasClass(e)){var t=this.className.split(" ");t.push(e),this.className=t.join(" ")}return this},Element.prototype.removeClass=function(e){var t=this.className.split(" "),i=t.indexOf(e);return i>=0&&(t.splice(i,1),this.className=t.join(" ")),this},Element.prototype.toggleClass=function(e){this.hasClass(e)?this.removeClass(e):this.addClass(e)};var n=function(){function e(t){var i=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.Version="0.1.2",this.CurrentUrl=location.href,this.Config={elem:t.elem,displayRatio:t.displayRatio||.7,displayReverse:t.displayReverse||!1,firstElem:t.firstElem||null,firstElemDelayTime:t.firstElemDelayTime||0,firstDelayTime:t.firstDelayTime||300,loadDelayTime:t.loadDelayTime||0,addClassNameLoaded:t.addClassNameLoaded||"is-loaded",addClassNameActive:t.addClassNameActive||"is-active"},this.ElemList=new Array,this.ElemListFix=new Array,this.ElemListNoneFix=new Array,-1===this.CurrentUrl.search(/localhost/)&&-1===this.CurrentUrl.search(/192.168/)||this.DebugMode(),document.addEventListener("DOMContentLoaded",function(e){i.CacheElement(),i.BindEvent()})}return s(e,[{key:"DebugMode",value:function(){console.log(this)}},{key:"BindEvent",value:function(){var e=this,t=this;window.addEventListener("load",function(i){setTimeout(function(){setTimeout(function(){e.UpdateDom(),e.JudgmentScrollEffect("load")},e.Config.firstDelayTime)},t.Config.loadDelayTime)}),window.addEventListener("resize",function(t){e.UpdateDom()}),window.addEventListener("scroll",function(e){t.JudgmentScrollEffect("scroll")})}},{key:"CacheElement",value:function(){this.$elemItem=document.querySelectorAll(this.Config.elem)?document.querySelectorAll(this.Config.elem):document.createElement("div"),this.$elemFirstItem=document.querySelectorAll(this.Config.firstElem)?document.querySelectorAll(this.Config.firstElem):document.createElement("div")}},{key:"CacheElementSize",value:function(){this.NumWindowHeight=window.innerHeight}},{key:"SetDom",value:function(){var e=this,t=this;this.ElemList=[],this.NumScrolltop=window.pageYOffset;var i=Array.prototype.slice.call(this.$elemItem);i&&i.forEach(function(i,s){t.ElemList.push(i.getBoundingClientRect().top+e.NumScrolltop)})}},{key:"UpdateDom",value:function(){this.CacheElement(),this.CacheElementSize(),this.SetDom()}},{key:"Refresh",value:function(){this.CacheElement(),this.CacheElementSize(),this.SetDom();for(var e=0;ethis.ElemList[t]&&(this.ElemListFix.push(t),0);this.ActionAddClassFirst()}else if("scroll"==e){for(var i=0;ithis.ElemList[i]?(this.ElemListFix.push(i),0):this.ElemListNoneFix.push(i);this.ActionAddClass()}}},{key:"ActionAddClassFirst",value:function(){var e=this,t=0;this.$elemFirstItem.length?function i(){setTimeout(function(){e.$elemFirstItem[t].addClass(e.Config.addClassNameActive),++t Date: Wed, 11 Jul 2018 21:35:57 +0900 Subject: [PATCH 2/4] modify: adjust sample html. --- sample/index.html | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/sample/index.html b/sample/index.html index aa4b2d8..a6a4d0f 100644 --- a/sample/index.html +++ b/sample/index.html @@ -4,26 +4,31 @@ js-scroll-effect-module | yama-dev - - - - - + + +
-
+
-

js-scroll-effect-module v0.1.1

+

SCROLL EFFECT MODULE v0.1.2

+ + Follow @yama-dev + Download + Star + Fork + + -
+
-

+

Sample Code

- + ```
diff --git a/package.json b/package.json index 86613a6..33f3c92 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "js-scroll-effect-module", "version": "0.1.2", - "description": "Add effect according to scroll.", + "description": "Add effect at scroll.", "keywords": [ "scroll", "scroll effect", From d468dd2e800a46850cf5c34d1ebdcb6b6c516cda Mon Sep 17 00:00:00 2001 From: yama-dev Date: Wed, 11 Jul 2018 22:34:52 +0900 Subject: [PATCH 4/4] modify: add callbackmethod. --- on: { In: function(item, pos){ }, Out: function(item, pos){ } } --- add RemoveAll method. --- RemoveAll(); --- --- dist/js-scroll-effect-module.js | 2 +- sample/index.html | 95 +++++++++++++++++++++++++-------- src/js-scroll-effect-module.js | 30 +++++++++-- 3 files changed, 101 insertions(+), 26 deletions(-) diff --git a/dist/js-scroll-effect-module.js b/dist/js-scroll-effect-module.js index 7eec2d8..1187a9e 100644 --- a/dist/js-scroll-effect-module.js +++ b/dist/js-scroll-effect-module.js @@ -7,4 +7,4 @@ * Copyright yama-dev * Licensed under the MIT license. */ -Element.prototype.hasClass=function(e){return this.className.split(" ").indexOf(e)>=0},Element.prototype.addClass=function(e){if(!this.hasClass(e)){var t=this.className.split(" ");t.push(e),this.className=t.join(" ")}return this},Element.prototype.removeClass=function(e){var t=this.className.split(" "),i=t.indexOf(e);return i>=0&&(t.splice(i,1),this.className=t.join(" ")),this},Element.prototype.toggleClass=function(e){this.hasClass(e)?this.removeClass(e):this.addClass(e)};var n=function(){function e(t){var i=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.Version="0.1.2",this.CurrentUrl=location.href,this.Config={elem:t.elem,displayRatio:t.displayRatio||.7,displayReverse:t.displayReverse||!1,firstElem:t.firstElem||null,firstElemDelayTime:t.firstElemDelayTime||0,firstDelayTime:t.firstDelayTime||300,loadDelayTime:t.loadDelayTime||0,addClassNameLoaded:t.addClassNameLoaded||"is-loaded",addClassNameActive:t.addClassNameActive||"is-active"},this.ElemList=new Array,this.ElemListFix=new Array,this.ElemListNoneFix=new Array,-1===this.CurrentUrl.search(/localhost/)&&-1===this.CurrentUrl.search(/192.168/)||this.DebugMode(),document.addEventListener("DOMContentLoaded",function(e){i.CacheElement(),i.BindEvent()})}return s(e,[{key:"DebugMode",value:function(){console.log(this)}},{key:"BindEvent",value:function(){var e=this,t=this;window.addEventListener("load",function(i){setTimeout(function(){setTimeout(function(){e.UpdateDom(),e.JudgmentScrollEffect("load")},e.Config.firstDelayTime)},t.Config.loadDelayTime)}),window.addEventListener("resize",function(t){e.UpdateDom()}),window.addEventListener("scroll",function(e){t.JudgmentScrollEffect("scroll")})}},{key:"CacheElement",value:function(){this.$elemItem=document.querySelectorAll(this.Config.elem)?document.querySelectorAll(this.Config.elem):document.createElement("div"),this.$elemFirstItem=document.querySelectorAll(this.Config.firstElem)?document.querySelectorAll(this.Config.firstElem):document.createElement("div")}},{key:"CacheElementSize",value:function(){this.NumWindowHeight=window.innerHeight}},{key:"SetDom",value:function(){var e=this,t=this;this.ElemList=[],this.NumScrolltop=window.pageYOffset;var i=Array.prototype.slice.call(this.$elemItem);i&&i.forEach(function(i,s){t.ElemList.push(i.getBoundingClientRect().top+e.NumScrolltop)})}},{key:"UpdateDom",value:function(){this.CacheElement(),this.CacheElementSize(),this.SetDom()}},{key:"Refresh",value:function(){this.CacheElement(),this.CacheElementSize(),this.SetDom();for(var e=0;ethis.ElemList[t]&&(this.ElemListFix.push(t),0);this.ActionAddClassFirst()}else if("scroll"==e){for(var i=0;ithis.ElemList[i]?(this.ElemListFix.push(i),0):this.ElemListNoneFix.push(i);this.ActionAddClass()}}},{key:"ActionAddClassFirst",value:function(){var e=this,t=0;this.$elemFirstItem.length?function i(){setTimeout(function(){e.$elemFirstItem[t].addClass(e.Config.addClassNameActive),++t=0},Element.prototype.addClass=function(e){if(!this.hasClass(e)){var t=this.className.split(" ");t.push(e),this.className=t.join(" ")}return this},Element.prototype.removeClass=function(e){var t=this.className.split(" "),i=t.indexOf(e);return i>=0&&(t.splice(i,1),this.className=t.join(" ")),this},Element.prototype.toggleClass=function(e){this.hasClass(e)?this.removeClass(e):this.addClass(e)};var n=function(){function e(t){var i=this;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.Version="0.1.2",this.CurrentUrl=location.href,this.Config={elem:t.elem,displayRatio:t.displayRatio||.7,displayReverse:t.displayReverse||!1,firstElem:t.firstElem||null,firstElemDelayTime:t.firstElemDelayTime||0,firstDelayTime:t.firstDelayTime||300,loadDelayTime:t.loadDelayTime||0,addClassNameActive:t.addClassNameActive||"is-active"},t.on||(t.on={}),this.on={In:t.on.In||"",Out:t.on.Out||""},this.ElemList=new Array,this.ElemListFix=new Array,this.ElemListNoneFix=new Array,-1===this.CurrentUrl.search(/localhost/)&&-1===this.CurrentUrl.search(/192.168/)||this.DebugMode(),document.addEventListener("DOMContentLoaded",function(e){i.CacheElement(),i.BindEvent()})}return s(e,[{key:"DebugMode",value:function(){console.log(this)}},{key:"BindEvent",value:function(){var e=this,t=this;window.addEventListener("load",function(i){setTimeout(function(){setTimeout(function(){e.UpdateDom(),e.JudgmentScrollEffect("load")},e.Config.firstDelayTime)},t.Config.loadDelayTime)}),window.addEventListener("resize",function(t){e.UpdateDom()}),window.addEventListener("scroll",function(e){t.JudgmentScrollEffect("scroll")})}},{key:"CacheElement",value:function(){this.$elemItem=document.querySelectorAll(this.Config.elem)?document.querySelectorAll(this.Config.elem):document.createElement("div"),this.$elemFirstItem=document.querySelectorAll(this.Config.firstElem)?document.querySelectorAll(this.Config.firstElem):document.createElement("div")}},{key:"CacheElementSize",value:function(){this.NumWindowHeight=window.innerHeight}},{key:"SetDom",value:function(){var e=this,t=this;this.ElemList=[],this.NumScrolltop=window.pageYOffset;var i=Array.prototype.slice.call(this.$elemItem);i&&i.forEach(function(i,s){t.ElemList.push(i.getBoundingClientRect().top+e.NumScrolltop)})}},{key:"UpdateDom",value:function(){this.CacheElement(),this.CacheElementSize(),this.SetDom()}},{key:"Refresh",value:function(){this.CacheElement(),this.CacheElementSize(),this.SetDom();for(var e=0;ethis.ElemList[t]&&(this.ElemListFix.push(t),0);this.ActionAddClassFirst()}else if("scroll"==e){for(var i=0;ithis.ElemList[i]?(this.ElemListFix.push(i),0):this.ElemListNoneFix.push(i);this.ActionAddClass()}}},{key:"ActionAddClassFirst",value:function(){var e=this,t=0;this.$elemFirstItem.length?function i(){setTimeout(function(){e.$elemFirstItem[t].addClass(e.Config.addClassNameActive),++t
-

SCROLL EFFECT MODULE v0.1.2

+

SCROLL EFFECT MODULE v0.1.2

+ +

Add effect at scroll.

Follow @yama-dev Download Star Fork - + -
+
+ +

Basic Use

+
+ 
+        
+        <link rel="stylesheet" href="./scroll-effect-module.css">
+        <div class="effect_item effect__fadein-basic">
 
-      
Sample Code

-      

+        <script> new SCROLL_EFFECT_MODULE({ elem: '.effect_item' }); </script>
+
+
+ +
+ +

Custom Use

+ 
         
+        <link rel="stylesheet" href="./scroll-effect-module.css">
+        <div class="effect_item effect__fadein-basic">
+
         <script>
           var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
             elem               : '.effect_item',
@@ -51,13 +82,31 @@ 
Sample Code

             firstElem          : '.effect_item--first',
             firstElemDelayTime : 300,
             firstDelayTime     : 500,
-            loadDelayTime      : 0
+            loadDelayTime      : 0,
+            addClassNameActive : 'is-active',
+            on: {
+              In: function(item, pos){
+                console.log('In')
+                console.log(item);
+                console.log(pos);
+              },
+              Out: function(item, pos){
+                console.log('Out')
+                console.log(item);
+                console.log(pos);
+              }
+            }
           });
         </script>
+ +

+

+

+
-
+
@@ -66,41 +115,43 @@

Sample Code

-
+

DEMO

+











+

EffectType : fadein basic

EffectClassname : .effect__fadein-basic

-















-
+











+

EffectType : fadein top

EffectClassname : .effect__fadein-top

-















-
+











+

EffectType : fadein bottom

EffectClassname : .effect__fadein-bottom

-















-
+











+

EffectType : fadein left

EffectClassname : .effect__fadein-left

-















-
+











+

EffectType : fadein right

EffectClassname : .effect__fadein-right

-















-
+











+

EffectType : fadein zoomin

EffectClassname : .effect__fadein-zoomin

-















-
+











+

EffectType : spinin

EffectClassname : .effect__spinin

-















+











diff --git a/src/js-scroll-effect-module.js b/src/js-scroll-effect-module.js index 40c2c5d..6423134 100644 --- a/src/js-scroll-effect-module.js +++ b/src/js-scroll-effect-module.js @@ -51,8 +51,16 @@ class SCROLL_EFFECT_MODULE { firstElemDelayTime : options.firstElemDelayTime||0, firstDelayTime : options.firstDelayTime||300, loadDelayTime : options.loadDelayTime||0, - addClassNameLoaded : options.addClassNameLoaded||'is-loaded', - addClassNameActive : options.addClassNameActive||'is-active', + addClassNameActive : options.addClassNameActive||'is-active' + } + + // Set callback functions. + if(!options.on){ + options.on = {} + } + this.on = { + In : options.on.In||'', + Out : options.on.Out||'' } // Store element information. @@ -130,7 +138,17 @@ class SCROLL_EFFECT_MODULE { this.CacheElementSize(); this.SetDom(); for(let _i = 0;_i < this.ElemList.length; _i++){ - this.ElemList[_i].removeClass(this.Config.addClassNameActive); + this.$elemItem[_i].removeClass(this.Config.addClassNameActive); + } + this.ActionAddClass(); + } + + RemoveAll(){ + this.CacheElement(); + this.CacheElementSize(); + this.SetDom(); + for(let _i = 0;_i < this.ElemList.length; _i++){ + this.$elemItem[_i].removeClass(this.Config.addClassNameActive); } } @@ -208,12 +226,18 @@ class SCROLL_EFFECT_MODULE { for(let _i = 0;_i < this.ElemListFix.length; _i++){ if(this.$elemItem[this.ElemListFix[_i]].hasClass(this.Config.addClassNameActive)){}else{ this.$elemItem[this.ElemListFix[_i]].addClass(this.Config.addClassNameActive); + + // Callback function. + if(this.on.In && typeof(this.on.In) === 'function') this.on.In(this.$elemItem[this.ElemListFix[_i]], this.ElemListFix[_i]); } } if(this.Config.displayReverse){ for(let _i = 0;_i < this.ElemListNoneFix.length; _i++){ if(this.$elemItem[this.ElemListNoneFix[_i]].hasClass(this.Config.addClassNameActive)){ this.$elemItem[this.ElemListNoneFix[_i]].removeClass(this.Config.addClassNameActive); + + // Callback function. + if(this.on.Out && typeof(this.on.Out) === 'function') this.on.Out(this.$elemItem[this.ElemListNoneFix[_i]], this.ElemListNoneFix[_i]); } } }