Merge branch '発表後修正' into 'master'

アニメーション追加

See merge request !78

src/main/resources/static/css/style.css

@@ -2060,4 +2060,4 @@ th, td {
 /* top画面フッター */
 #top-footer {
 	margin-top: 70px;
-}
\ No newline at end of file
+}

src/main/resources/static/js/list.js

@@ -139,14 +139,140 @@ $('.cartBtn').on('click', function(event){
 
 
 //ユニーク機能
+//$("#limitedListBox").css("display", "none");
+//let count = 0;
+//$("#secret").on("click", function() {
+//	count ++;
+//	if (count % 2 == 1) {		
+//		$("#limitedListBox").css("display", "flex");
+//	} else {
+//		$("#limitedListBox").css("display", "none");
+//	}
+//});
+
+
+
+//アニメーション
+
+var fadeIn = function(element, time, callback) {
+    var fadeTime     = (time) ? time : 400,
+        keyFrame     = 30,
+        stepTime     = fadeTime / keyFrame,
+        maxOpacity   = 1,
+        stepOpacity  = maxOpacity / keyFrame,
+        opacityValue = 0,
+        sId          = '';
+ 
+    if (!element) return;
+ 
+    if (element.getAttribute('data-fade-stock-display') !== undefined &&
+        element.getAttribute('data-fade-stock-display') !== null) {
+        element.style.display = element.getAttribute('data-fade-stock-display');
+    }
+ 
+    var setOpacity = function(setNumber) {
+        if ('opacity' in element.style) {
+            element.style.opacity = setNumber;
+        } else {
+            element.style.filter = 'alpha(opacity=' + (setNumber * 100) + ')';
+ 
+            if (navigator.userAgent.toLowerCase().match(/msie/) &&
+                !window.opera && !element.currentStyle.hasLayout) {
+                element.style.zoom = 1;
+            }
+        }
+    };
+ 
+    if (!callback || typeof callback !== 'function') callback = function() {};
+ 
+    setOpacity(0);
+ 
+    sId = setInterval(function() {
+        opacityValue = Number((opacityValue + stepOpacity).toFixed(12));
+ 
+        if (opacityValue > maxOpacity) {
+            opacityValue = maxOpacity;
+            clearInterval(sId);
+        }
+ 
+        setOpacity(opacityValue);
+ 
+        if (opacityValue === maxOpacity) callback();
+    }, stepTime);
+ 
+    return element;
+};
+
+/**
+ * Fade-Out
+ * @param {Element} element 適用する要素
+ * @param {Number} [time=400] 効果時間（ミリ秒で指定）
+ * @param {Function} [callback] 完了後のコールバック関数
+ */
+var fadeOut = function(element, time, callback) {
+    var fadeTime     = (time) ? time : 400,
+        keyFrame     = 30,
+        stepTime     = fadeTime / keyFrame,
+        minOpacity   = 0,
+        stepOpacity  = 1 / keyFrame,
+        opacityValue = 1,
+        sId          = '';
+ 
+    if (!element) return;
+ 
+    element.setAttribute('data-fade-stock-display', element.style.display.replace('none', ''));
+ 
+    var setOpacity = function(setNumber) {
+        if ('opacity' in element.style) {
+            element.style.opacity = setNumber;
+        } else {
+            element.style.filter = 'alpha(opacity=' + (setNumber * 100) + ')';
+ 
+            if (navigator.userAgent.toLowerCase().match(/msie/) &&
+                !window.opera && !element.currentStyle.hasLayout) {
+                element.style.zoom = 1;
+            }
+        }
+    };
+ 
+    if (!callback || typeof callback !== 'function') callback = function() {};
+ 
+    setOpacity(1);
+ 
+    sId = setInterval(function() {
+        opacityValue = Number((opacityValue - stepOpacity).toFixed(12));
+ 
+        if (opacityValue < minOpacity) {
+            opacityValue = minOpacity;
+            element.style.display = 'none';
+            clearInterval(sId);
+        }
+ 
+        setOpacity(opacityValue);
+ 
+        if (opacityValue === minOpacity) callback();
+    }, stepTime);
+ 
+    return element;
+};
+
+
 $("#limitedListBox").css("display", "none");
+let sampleElmt     = document.getElementById('limitedListBox'),
+fadeInBtnElmt  = document.getElementById('secret'),
+fadeOutBtnElmt = document.getElementById('secret');
+
+
 let count = 0;
-$("#secret").on("click", function() {
+fadeInBtnElmt.onclick = function() {
 	count ++;
-	if (count % 2 == 1) {		
+	if (count % 2 == 1) {
+		//フェードイン
 		$("#limitedListBox").css("display", "flex");
+		fadeIn(sampleElmt, 1500);		
 	} else {
-		$("#limitedListBox").css("display", "none");
+		//フェードアウト
+		$("#limitedListBox").css("display", "flex");
+		fadeOut(sampleElmt, 1500);		
 	}
-});
-
+};
\ No newline at end of file

src/main/resources/templates/index.html

@@ -261,8 +261,9 @@
         <script src="js/vendor/bootstrap.min.js" th:src="@{/js/vendor/bootstrap.min.js}"></script>
         <script src="js/isotope.pkgd.min.js" th:src="@{/js/isotope.pkgd.min.js}"></script>
         <script src="js/owl.carousel.min.js" th:src="@{/js/owl.carousel.min.js}"></script>
-        <script src="js/wow.min.js" th:src="@{/js/wow.min.js}"></script>
-        <script src="js/custom.js" th:src="@{/js/custom.js}"></script>-->
+        <script src="js/wow.min.js" th:src="@{/js/wow.min.js}"></script>-->
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+        <script src="js/custom.js" th:src="@{/js/index.js}"></script>
        
         <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
             integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>