From 1fd3531a203c75ad142e7fb3ca391415e3dc19b0 Mon Sep 17 00:00:00 2001 From: yama-dev Date: Sat, 8 Dec 2018 19:03:03 +0900 Subject: [PATCH 1/3] adjust version text. --- dist/js-scroll-effect-module.js | 2 +- package.json | 2 +- src/js-scroll-effect-module.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/js-scroll-effect-module.js b/dist/js-scroll-effect-module.js index 1187a9e..21c047e 100644 --- a/dist/js-scroll-effect-module.js +++ b/dist/js-scroll-effect-module.js @@ -2,7 +2,7 @@ /*! * JS SCROLL EFFECT MODULE (JavaScript Library) * js-scroll-effect-module - * versoin 0.1.2 + * versoin 0.1.3 * Repository https://github.com/yama-dev/js-scroll-effect-module * Copyright yama-dev * Licensed under the MIT license. diff --git a/package.json b/package.json index 33f3c92..6032986 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "js-scroll-effect-module", - "version": "0.1.2", + "version": "0.1.3", "description": "Add effect at scroll.", "keywords": [ "scroll", diff --git a/src/js-scroll-effect-module.js b/src/js-scroll-effect-module.js index 6423134..f6d2f58 100644 --- a/src/js-scroll-effect-module.js +++ b/src/js-scroll-effect-module.js @@ -1,7 +1,7 @@ /*! * JS SCROLL EFFECT MODULE (JavaScript Library) * js-scroll-effect-module - * versoin 0.1.2 + * versoin 0.1.3 * Repository https://github.com/yama-dev/js-scroll-effect-module * Copyright yama-dev * Licensed under the MIT license. From 3d773cf87a2b39b84bddc199f73ebd438da26f31 Mon Sep 17 00:00:00 2001 From: yama-dev Date: Sat, 8 Dec 2018 19:04:12 +0900 Subject: [PATCH 2/3] update webpack & webpack-cli. --- dist/js-scroll-effect-module.js | 2 +- package.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/dist/js-scroll-effect-module.js b/dist/js-scroll-effect-module.js index 21c047e..4670fcc 100644 --- a/dist/js-scroll-effect-module.js +++ b/dist/js-scroll-effect-module.js @@ -1,4 +1,4 @@ -!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{var i=t();for(var s in i)("object"==typeof exports?exports:e)[s]=i[s]}}(window,function(){return function(e){var t={};function i(s){if(t[s])return t[s].exports;var n=t[s]={i:s,l:!1,exports:{}};return e[s].call(n.exports,n,n.exports,i),n.l=!0,n.exports}return i.m=e,i.c=t,i.d=function(e,t,s){i.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:s})},i.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=0)}([function(e,t,i){"use strict";i.r(t);var s=function(){function e(e,t){for(var i=0;i Date: Sat, 8 Dec 2018 19:04:37 +0900 Subject: [PATCH 3/3] adjust sample page. --- sample/index.html | 249 +++++++++++++++++++++++----------------------- 1 file changed, 124 insertions(+), 125 deletions(-) diff --git a/sample/index.html b/sample/index.html index 6e3d9e7..42a1c83 100644 --- a/sample/index.html +++ b/sample/index.html @@ -8,152 +8,151 @@ + + + + + - -
+ +
-
-
-
-

SCROLL EFFECT MODULE v0.1.2

+

SCROLL EFFECT MODULE v0.1.3

-

Add effect at scroll.

+

Add effect at scroll.

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

Basic Use

-
-
+  
+

Basic Use

+
         
         <link rel="stylesheet" href="./scroll-effect-module.css">
         <div class="effect_item effect__fadein-basic">
 
         <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', - displayRatio : 0.8, - displayReverse : true, - firstElem : '.effect_item--first', - firstElemDelayTime : 300, - firstDelayTime : 500, - 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); - } +
+ +
+

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',
+          displayRatio       : 0.8,
+          displayReverse     : true,
+          firstElem          : '.effect_item--first',
+          firstElemDelayTime : 300,
+          firstDelayTime     : 500,
+          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>
-        
+ } + }); + </script>
+
-

-

-

+

+

+

-
+
-
+
+
+

DEMO

+











+
+

EffectType : fadein basic

+

EffectClassname : .effect__fadein-basic

-
-
- -
-
-
-

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

-
-











+











+
+

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

-
+