yama-dev · yama-dev · Aug 6, 2021 · Aug 6, 2021 · Aug 6, 2021 · Aug 6, 2021
diff --git a/.env b/.env
@@ -0,0 +1,2 @@
+SLUG=js-scroll-effect-module
+VERSION=0.11.0
diff --git 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
diff --git a/dist/js-scroll-effect-module.js b/dist/js-scroll-effect-module.js
diff --git a/examples/empty.html b/examples/empty.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+  <title>js-scroll-effect-module | yama-dev</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
+  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
+  <link rel="stylesheet" href="./scroll-effect-module.css">
+  <script src="../dist/js-scroll-effect-module.js"></script>
+
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-91619969-3"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-91619969-3');
+  </script>
+</head>
+<body style="overflow-x:hidden;">
+<div class="container mt-4">
+
+
+  <div class="p-use">
+    <script>
+      var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
+        elem               : '.js-scroll',
+        firstElem          : '.js-scroll--first',
+
+        displayRatio       : 0.8,
+        displayReverse     : true,
+        displayRatioReverse: 1.2,
+
+        firstDelay         : 0,
+        firstDelaySteps    : 100,
+
+        throttleInterval   : 50,
+
+        autoStart          : true,
+
+        addClassNameActive : 'is-active',
+
+        on: {
+          Scroll: function(top){
+            console.log('Scroll', top);
+            document.querySelector('.dev .t1').innerHTML = top;
+          },
+          Change: function(item, pos, obj, top){
+            console.log('Change', item, pos, obj, top);
+            document.querySelector('.dev .t2').innerHTML = pos;
+          },
+          In: function(item, pos, obj, top){
+            console.log('In', item, pos, obj, top);
+          },
+          Out: function(item, pos, obj, top){
+            console.log('Out', item, pos, obj, top);
+          }
+        }
+      });
+    </script>
+
+    <p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Update()">要素の情報更新 - ScrollEffectModule.Update()</button></p>
+    <p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Refresh()">リフレッシュ - ScrollEffectModule.Refresh()</button></p>
+    <p><button class="btn btn btn-secondary" onclick="ScrollEffectModule.Clear()">非アクティブ化 - ScrollEffectModule.Clear()</button></p>
+
+  </div>
+
+  <hr class="mt-4 mb-4">
+
+  <div class="p-demo">
+    <h3 class="">DEMO</h3>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <div class="text-center" data-sem-offset="600">
+      <h2>EffectType : fadein basic</h2>
+      <p>EffectClassname : .js-scroll__fadein-basic</p>
+    </div>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <div class="text-center">
+      <h2>EffectType : fadein top</h2>
+      <p>EffectClassname : .js-scroll__fadein-top</p>
+    </div>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <div class="text-center">
+      <h2>EffectType : fadein bottom</h2>
+      <p>EffectClassname : .js-scroll__fadein-bottom</p>
+    </div>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <div class="text-center">
+      <h2>EffectType : fadein left</h2>
+      <p>EffectClassname : .js-scroll__fadein-left</p>
+    </div>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <div class="text-center">
+      <h2>EffectType : fadein right</h2>
+      <p>EffectClassname : .js-scroll__fadein-right</p>
+    </div>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <div class="text-center">
+      <h2>EffectType : fadein zoomin</h2>
+      <p>EffectClassname : .js-scroll__fadein-zoomin</p>
+    </div>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <div class="text-center">
+      <h2>EffectType : spinin</h2>
+      <p>EffectClassname : .js-scroll__spinin</p>
+    </div>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+  </div>
+
+</div>
+
+<div class="dev" style="position: fixed; bottom: 0; left: 0; padding: 10px; background: rgba(0,0,0,0.5); color: #fff;">
+  <div>スクロール　：　<span class="t1" style="display: inline-block; width: 3em;"></span>[px]</div>
+  <div>ポジション　：　<span class="t2" style="display: inline-block; width: 3em;"></span></div>
+</div>
+
+<a href="https://github.com/yama-dev/js-scroll-effect-module" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: fixed; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+</body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -155,8 +155,6 @@ <h3>Advanced Use (Acceleration)</h3>
       &lt;/script&gt;</code>
     </pre>
 
-    <p><a class="btn btn btn-secondary" href="./acceleration.html">デモページへ</a></p>
-
   </div>
 
   <hr class="mt-4 mb-4 js-scroll js-scroll__fadein-bottom">

diff --git a/examples/intersect.html b/examples/intersect.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+  <title>js-scroll-effect-module | yama-dev</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
+  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
+  <link rel="stylesheet" href="./scroll-effect-module.css">
+  <script src="../dist/js-scroll-effect-module.js"></script>
+
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
+  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-91619969-3"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'UA-91619969-3');
+  </script>
+
+  <style>
+.is-intersect {
+}
+[data-sem-intersect-item] {
+  transition: all 0.2s ease 0s;
+  transform: translateX(20px);
+  opacity: 0;
+}
+.is-intersect [data-sem-intersect-item].is-active {
+  transform: translateX(0);
+  opacity: 1;
+}
+
+
+.intersect-wrap {
+  position: relative;
+}
+.intersect-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: url(./bg.jpg) bottom center no-repeat;
+  background-size: cover;
+  opacity: 0.4;
+}
+.is-intersect .intersect-bg {
+  position: fixed;
+}
+.is-intersect-over .intersect-bg {
+  top: auto;
+  bottom: 0;
+}
+  </style>
+</head>
+<body style="overflow-x:hidden;">
+<div class="container container-fluid mt-4" style="max-width: 100%; padding: 0;">
+
+  <h2 class="mb-3">SCROLL EFFECT MODULE</h2>
+
+  <p>Add effect at scroll.</p>
+
+  <hr class="mt-4 mb-4">
+
+  <div class="p-use">
+    <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;link rel=&quot;stylesheet&quot; href=&quot;./scroll-effect-module.css&quot;&gt;
+      &lt;div class=&quot;js-scroll&quot;&gt;&lt;/div&gt;
+
+      &lt;script&gt;
+      &lt;/script&gt;</code>
+    </pre>
+
+    <script>
+      var ScrollEffectModule = new SCROLL_EFFECT_MODULE({
+        // scroll option
+        elem               : '.js-scroll',
+        firstElem          : '.js-scroll--first',
+        displayRatio       : 0.5,
+        displayReverse     : true,
+        displayRatioReverse: 0.9,
+        firstDelay         : 0,
+        firstDelaySteps    : 100,
+        autoStart          : true,
+        addClassNameActive : 'is-active',
+
+        // intersect optioon.
+        throttleInterval   : 10,
+        intersect          : true,
+        addClassNameIntersect : 'is-intersect',
+
+        on: {
+          Scroll: function(top){
+            // console.log('Scroll', top);
+          },
+          Change: function(item, pos, obj, top){
+            // console.log('Change', item, pos, obj, top);
+          },
+          In: function(item, pos, obj, top){
+            // console.log('In', item, pos, obj, top);
+          },
+          Out: function(item, pos, obj, top){
+            // console.log('Out', item, pos, obj, top);
+          },
+          Intersect: function(obj){
+            // console.log(obj);
+          }
+        }
+      });
+    </script>
+  </div>
+
+  <hr>
+
+  <div class="p-demo">
+
+    <h3>DEMO</h3>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+
+    <div class="js-scroll intersect-wrap" data-sem-slug="test111" style="border: 1px solid rgba(0,0,0,0.5);">
+      <div class="intersect-bg"></div>
+      <h2>Effect</h2>
+      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+      <div class="js-scroll" data-sem-intersect-item style="border: 1px solid rgba(0,0,0,0.5);">
+        <p>1</p>
+      </div>
+      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+      <div class="js-scroll" data-sem-intersect-item style="border: 1px solid rgba(0,0,0,0.5);">
+        <p>2</p>
+      </div>
+      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+      <div class="js-scroll" data-sem-intersect-item style="border: 1px solid rgba(0,0,0,0.5);">
+        <p>3</p>
+      </div>
+      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
+    </div>
+
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <h3>DEMO</h3>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <div class="js-scroll js-scroll__fadein-basic text-center" data-sem-slug="test222" style="opacity: 0.5 !important; border: 1px solid rgba(0,0,0,0.5);">
+      <h2>Effect</h2>
+      <br><br><br><br><br><br><br><br><br><br><br><br>
+      <br><br><br><br><br><br><br><br><br><br><br><br>
+      <br><br><br><br><br><br><br><br><br><br><br><br>
+      <br><br><br><br><br><br><br><br><br><br><br><br>
+    </div>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+    <br><br><br><br><br><br><br><br><br><br><br><br>
+  </div>
+
+</div>
+
+<a href="https://github.com/yama-dev/js-scroll-effect-module" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+</body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -155,8 +155,6 @@ <h3>Advanced Use (Acceleration)</h3> @@
           &lt;/script&gt;</code>
         </pre>
-        <p><a class="btn btn btn-secondary" href="./acceleration.html">デモページへ</a></p>
       </div>
       <hr class="mt-4 mb-4 js-scroll js-scroll__fadein-bottom">
@@ Expand Down @@