Merge pull request #25 from yama-dev/v0.13.3

V0.13.3
yama-dev · Mar 23, 2024 · 65f5f04 · 65f5f04
2 parents f2a9e5a + 74ecf68
commit 65f5f04
Show file tree

Hide file tree

Showing 8 changed files with 203 additions and 242 deletions.
diff --git a/.env b/.env
@@ -1,2 +1,2 @@
 SLUG=js-scroll-effect-module
-VERSION=0.13.2
+VERSION=0.13.3
diff --git a/README.md b/README.md
@@ -46,9 +46,17 @@ import SCROLL_EFFECT_MODULE from 'js-scroll-effect-module';
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module/examples/scroll-effect-module.css">
 <script src="https://cdn.jsdelivr.net/gh/yama-dev/js-scroll-effect-module/dist/js-scroll-effect-module.js"></script>
 
-<div data-scroll data-scroll-name="name-1"></div>
+<div data-scroll></div>
 
-<div data-scroll data-scroll-name="name-2"></div>
+<div data-scroll></div>
+
+<script>
+new SCROLL_EFFECT_MODULE({
+  target: '[data-scroll]',
+  ratio : 0.8,   // 判定する比率を指定（ウィンドウ高さを1として指定）
+  reverse: true, // スクロールを戻した時にクラスを削除するかどうか
+});
+</script>
 ```
 
 ### Advanced Use
@@ -65,17 +73,18 @@ const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
   target             : '[data-scroll]',
   classNameInview    : 'is-active',
 
-  displayRatio       : 0.8,   // 判定する比率を指定（ウィンドウ高さを1として指定）
-  displayReverse     : false, // スクロールを戻した時にクラスを削除するかどうか
-  displayRatioReverse: null,
+  ratio              : 0.8,   // 判定する比率を指定（ウィンドウ高さを1として指定）
+  reverse            : false, // スクロールを戻した時にクラスを削除するかどうか
 
-  firstDelay         : 100, // 初回動作までの遅延時間（ms）
+  ratioReverse       : null, // 戻る際の判定比率を指定（ウィンドウ高さを1として指定）
 
-  throttleInterval   : 5,
+  firstDelay         : 100, // 初回動作までの遅延時間（ms）
 
-  autoStart          : true,
+  autoStart          : true, // 自動でスタートするかどうか
   autoStartType      : 'ready', // ready, load, scroll
 
+  throttleInterval   : 5,
+
   on: {
     Change: function(obj, index, name){
       console.log('Change', obj, index, name);

diff --git a/dist/js-scroll-effect-module.js b/dist/js-scroll-effect-module.js
diff --git a/examples/index.html b/examples/index.html
@@ -39,68 +39,94 @@ <h2 class="mb-3">SCROLL EFFECT MODULE</h2>
 
   <div class="p-use" data-scroll>
     <h3>Basic Use</h3>
-    <pre class="prettyprint lang-html">
-      <code>
-      &lt;div data-scroll&gt;&lt;/div&gt;
-      &lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
-      &lt;script&gt; new SCROLL_EFFECT_MODULE({ target: &#039;[data-scroll]&#039; }); &lt;/script&gt;</code>
-    </pre>
-    <pre class="prettyprint lang-html">
-      <code>
-      // 予め容易されているアニメーションを利用する場合
-      &lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
-      &lt;div data-scroll data-scroll-type=&quot;fadein&quot;&gt;&lt;/div&gt;</code>
-    </pre>
+    <details>
+      <summary>HTML</summary>
+      <pre class="prettyprint lang-html"><code>
+  &lt;div data-scroll&gt;&lt;/div&gt;
+  &lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
+  &lt;script&gt; new SCROLL_EFFECT_MODULE({ target: &#039;[data-scroll]&#039; }); &lt;/script&gt;
+      </code></pre>
+      <pre class="prettyprint lang-html"><code>
+  // with default css
+  &lt;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
+  &lt;div data-scroll data-scroll-type=&quot;fadein&quot;&gt;&lt;/div&gt;
+  &lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
+  &lt;script&gt; new SCROLL_EFFECT_MODULE({ target: &#039;[data-scroll]&#039; }); &lt;/script&gt;
+      </code></pre>
+    </details>
   </div>
 
   <hr class="mt-4 mb-4" data-scroll>
 
   <div class="p-use" data-scroll>
     <h3>Advanced Use</h3>
-    <pre class="prettyprint lang-html">
-      <code>
-      &lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
-      &lt;div data-scroll data-scroll-name=&quot;first&quot;&gt;&lt;/div&gt;
-      &lt;div data-scroll data-scroll-name=&quot;second&quot;&gt;&lt;/div&gt;
-      &lt;div data-scroll data-scroll-name=&quot;third&quot;&gt;&lt;/div&gt;
-
-      &lt;script&gt;
-      const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
-        target: &#39;[data-scroll]&#39;,
-        classNameInview    : &#39;is-active&#39;,
-        displayRatio       : 0.8,
-        displayReverse     : true,
-        displayRatioReverse: null,
-        throttleInterval   : 3,
-        autoStart          : true,
-        on: {
-          Change: function(obj, index, name){
-            console.log(&#39;Change&#39;, obj, index, name);
-          },
-          In: function(obj, index, name){
-            console.log(&#39;In&#39;, obj, index, name);
-          },
-          Out: function(obj, index, name){
-            console.log(&#39;Out&#39;, obj, index, name);
-          },
-          Scroll: function(top){
-            console.log(&#39;Scroll&#39;, top);
-          }
-        }
-      });
-      &lt;/script&gt;</code>
-    </pre>
+    <details>
+      <summary>HTML</summary>
+      <pre class="prettyprint lang-html"><code>
+  &lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
+  &lt;div data-scroll data-scroll-name=&quot;first&quot;&gt;&lt;/div&gt;
+  &lt;div data-scroll data-scroll-name=&quot;second&quot;&gt;&lt;/div&gt;
+  &lt;div data-scroll data-scroll-name=&quot;third&quot;&gt;&lt;/div&gt;
+
+  &lt;script&gt;
+  const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
+    target         : &#39;[data-scroll]&#39;,
+    classNameInview: &#39;is-active&#39;,
+    ratio          : 0.8,
+    ratioReverse   : null,
+    reverse        : true,
+    autoStart      : true,
+  });
+  &lt;/script&gt;
+      </code></pre>
+    </details>
+  </div>
+
+  <hr class="mt-4 mb-4" data-scroll>
+
+  <div class="p-use" data-scroll>
+    <h3>Advanced Use (callback)</h3>
+    <details>
+      <summary>HTML</summary>
+      <pre class="prettyprint lang-html"><code>
+  &lt;script src=&quot;./js-scroll-effect-module.js&quot;&gt;&lt;/script&gt;
+  &lt;div data-scroll data-scroll-name=&quot;first&quot;&gt;&lt;/div&gt;
+  &lt;div data-scroll data-scroll-name=&quot;second&quot;&gt;&lt;/div&gt;
+  &lt;div data-scroll data-scroll-name=&quot;third&quot;&gt;&lt;/div&gt;
+
+  &lt;script&gt;
+  const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
+    target         : &#39;[data-scroll]&#39;,
+    ratio          : 0.8,
+    reverse        : true,
+    on: {
+      Change: function(obj, index, name){
+        console.log(&#39;Change&#39;, obj, index, name);
+      },
+      In: function(obj, index, name){
+        console.log(&#39;In&#39;, obj, index, name);
+      },
+      Out: function(obj, index, name){
+        console.log(&#39;Out&#39;, obj, index, name);
+      },
+      Scroll: function(top){
+        console.log(&#39;Scroll&#39;, top);
+      }
+    }
+  });
+  &lt;/script&gt;
+      </code></pre>
+    </details>
 
     <script>
     const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
       target: '[data-scroll]',
-      classNameInview    : 'is-active',
-      displayRatio       : 0.8,
-      displayReverse     : true,
-      displayRatioReverse: null,
-      firstDelay         : 100,
-      throttleInterval   : 3,
-      autoStart          : true,
+      classNameInview : 'is-active',
+      ratio           : 0.5,
+      ratioReverse    : 0.9,
+      reverse         : true,
+      firstDelay      : 100,
+      autoStart       : true,
       on: {
         Change: function(obj, index, name){
           console.log('Change', obj, index, name);
@@ -147,22 +173,22 @@ <h2>EffectType : fadein bottom</h2>
       <p>[data-scroll-type="fadeinBottom"]</p>
     </div>
     <br><br><br><br><br><br><br><br><br><br><br><br>
-    <div class="text-center" data-scroll data-scroll-type="fadeinLeft">
+    <div class="text-center" data-scroll data-scroll-name="demo4" data-scroll-type="fadeinLeft">
       <h2>EffectType : fadein left</h2>
       <p>[data-scroll-type="fadeinLeft"]</p>
     </div>
     <br><br><br><br><br><br><br><br><br><br><br><br>
-    <div class="text-center" data-scroll data-scroll-type="fadeinRight">
+    <div class="text-center" data-scroll data-scroll-name="demo5" data-scroll-type="fadeinRight">
       <h2>EffectType : fadein right</h2>
       <p>[data-scroll-type="fadeinRight"]</p>
     </div>
     <br><br><br><br><br><br><br><br><br><br><br><br>
-    <div class="text-center" data-scroll data-scroll-type="zoomin">
+    <div class="text-center" data-scroll data-scroll-name="demo6" data-scroll-type="zoomin">
       <h2>EffectType : fadein zoomin</h2>
       <p>[data-scroll-type="zoomin"]</p>
     </div>
     <br><br><br><br><br><br><br><br><br><br><br><br>
-    <div class="text-center" data-scroll data-scroll-type="spinin">
+    <div class="text-center" data-scroll data-scroll-name="demo7" data-scroll-type="spinin">
       <h2>EffectType : spinin</h2>
       <p>[data-scroll-type="spinin"]</p>
     </div>