📝 サンプルのクラス名を調整

Author: yama-dev

README.md

@@ -72,7 +72,7 @@ new SCROLL_EFFECT_MODULE({
 <script>
 const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
   target             : '[data-scroll]',
-  classNameInview    : 'is-active',
+  classNameInview    : 'is-scroll-active',
 
   ratio              : 0.8,   // 判定する比率を指定（ウィンドウ高さを1として指定）
   reverse            : false, // スクロールを戻した時にクラスを削除するかどうか

examples/index.html

@@ -71,7 +71,7 @@ <h3>Advanced Use</h3>
   &lt;script&gt;
   const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
     target         : &#39;[data-scroll]&#39;,
-    classNameInview: &#39;is-active&#39;,
+    classNameInview: &#39;is-scroll-active&#39;,
     ratio          : 0.8,
     ratioReverse   : null,
     reverse        : true,
@@ -121,12 +121,13 @@ <h3>Advanced Use (callback)</h3>
     <script>
     const ScrollEffectModule = new SCROLL_EFFECT_MODULE({
       target: '[data-scroll]',
-      classNameInview : 'is-active',
+      classNameInview : 'is-scroll-active',
       ratio           : 0.5,
       ratioReverse    : 0.9,
       reverse         : true,
       firstDelay      : 100,
       autoStart       : true,
+      updateResizeAuto: true,
       on: {
         Change: function(obj, index, name){
           console.log('Change', obj, index, name);

examples/scroll-effect-module.css

@@ -7,42 +7,42 @@
   opacity: 0;
   transition: opacity var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadein"].is-active { opacity: 1; }
+[data-scroll-type="fadein"].is-scroll-active { opacity: 1; }
 
 [data-scroll-type="zoomin"] {
   opacity: 0;
   transform: scale(0.9);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="zoomin"].is-active { opacity: 1; transform: scale(1); }
+[data-scroll-type="zoomin"].is-scroll-active { opacity: 1; transform: scale(1); }
 
 [data-scroll-type="fadeinTop"] {
   opacity: 0;
   transform: translate(0, -30px);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadeinTop"].is-active { opacity: 1; transform: translate(0, 0); }
+[data-scroll-type="fadeinTop"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
 
 [data-scroll-type="fadeinBottom"] {
   opacity: 0;
   transform: translate(0, 30px);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadeinBottom"].is-active { opacity: 1; transform: translate(0, 0); }
+[data-scroll-type="fadeinBottom"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
 
 [data-scroll-type="fadeinLeft"] {
   opacity: 0;
   transform: translate(-80%, 0);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadeinLeft"].is-active { opacity: 1; transform: translate(0, 0); }
+[data-scroll-type="fadeinLeft"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
 
 [data-scroll-type="fadeinRight"] {
   opacity: 0;
   transform: translate(80%, 0);
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="fadeinRight"].is-active { opacity: 1; transform: translate(0, 0); }
+[data-scroll-type="fadeinRight"].is-scroll-active { opacity: 1; transform: translate(0, 0); }
 
 [data-scroll-type="spinin"] {
   opacity: 0;
@@ -51,5 +51,5 @@
   backface-visibility: hidden;
   transition: all var(--sem-duration) var(--sem-ease) 0s;
 }
-[data-scroll-type="spinin"].is-active { opacity: 1; transform: translate(0, 0) rotate3d(1, 0, 1, 0); }
+[data-scroll-type="spinin"].is-scroll-active { opacity: 1; transform: translate(0, 0) rotate3d(1, 0, 1, 0); }