Merge branch 'master' of https://gogs.interscope.i234.me/mo0647/splas

* 'master' of https://gogs.interscope.i234.me/mo0647/splas:
  병합
  카운팅

# Conflicts:
#	assets/css/style.css
#	assets/css/style.css.map

assets/css/animation.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/animation.scss"],"names":[],"mappings":"AAAA,uBACE,GACE,mBAGF,KACE,cAEA,UACE,6FASN,0BACE,GACE,cACA,UAGF,KACE,UACE,oFAOF,WAIJ,QACE,kBAGF,aACE,kBACA,cACA,iBACA,kBAEA,sBACA,2BACA,8BAEA,WAEA,WACA,YACA,mBAIF,oBACE,cACA,WACA,gBACA,0BAEA,mBAGF,mBACE,cACA,WACA,gBACA,cAEA,0BAEA,8CAEA,mBAIF,sBACE,4BACA,kCAEA,oCACA,qCAGA,mBAGF,qBACE,+BACA,kCACA,sBAEA,uCACA,qCACA,8BAGF,eACE,UACA,UACE,4FAQJ,SACE,UAGF,WACE,UAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,oBAGF,uCACE,oBAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,oBAGF,uCACE,oBAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE,oBAKF,sCACE,YAGF,uCACE,YAGF,wCACE,oBAGF,qCACE","file":"animation.css"}

assets/scss/animation.scss

@@ -0,0 +1,301 @@
+@keyframes animate-top {
+  0% {
+    background: #8b2ef4; /* Old browsers */
+  }
+  
+  100% {
+    color: #474747;
+    
+    transform: 
+      translateX(0px) 
+      translateY(50%) 
+      translateZ(5px) 
+      rotateX(-90deg)
+      rotateY(0deg)
+      rotateZ(0deg);
+  }
+}
+
+@keyframes animate-bottom {
+  0% {
+    color: #474747;
+    opacity: 1;
+  }
+  
+  100% {
+    transform: 
+      translateX(0) 
+      translateY(0) 
+      translateZ(0) 
+      rotateX(0deg) 
+      rotateY(0deg)
+      rotateZ(0deg);
+    
+    opacity: 1;
+  }
+}
+
+.number {
+  position: relative;
+}
+
+.number span {
+  position: absolute;
+  display: block;
+  font-weight: bold;
+  text-align: center;
+  
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  
+  color: white;
+  
+  width: 100%;
+  height: 100%;
+  perspective: 7.14em;
+  
+}
+
+.number span:before {
+  display: block;
+  height: 50%;
+  overflow: hidden;
+  border-radius: 20% 20% 0 0;
+  
+  background: #8b2ef4; /* Old browsers */
+}
+
+.number span:after {
+  display: block;
+  height: 50%;
+  overflow: hidden;
+  line-height: 0;
+  
+  border-radius: 0 0 20% 20%;
+  
+  transition: color 100ms, background-color 100ms;
+  
+  background: #7F1BF2; /* Old browsers */
+}
+
+
+.flip .primary:before {
+  animation: animate-top 250ms;
+  -moz-animation-fill-mode: forwards;
+  
+  -webkit-animation: animate-top 250ms;
+  -webkit-animation-fill-mode: forwards;
+  
+  
+  background: #7F1BF2; /* Old browsers */
+}
+
+.flip .primary:after {
+  animation: animate-bottom 250ms;
+  -moz-animation-fill-mode: forwards;
+  animation-delay: 250ms;
+  
+  -webkit-animation: animate-bottom 250ms;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-delay: 250ms;
+}
+
+.primary:after {
+  opacity: 0;
+  transform: 
+    translateX(0) 
+    translateY(-0.0em) 
+    translateZ(0.35em) 
+    rotateX(91deg) 
+    rotateY(0deg) 
+    rotateZ(0deg);
+}
+
+.primary {
+  z-index: 2;
+}
+
+.secondary {
+  z-index: 1;
+}
+
+/* Number 0 */
+
+[data-number="0"] span.primary:before {
+  content: "0";
+}
+
+[data-number="0"] span.secondary:after {
+  content: "0";
+}
+
+[data-number="0"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="0"] span.primary:after {
+  content: attr(title);
+}
+
+/* Number 9 */
+
+[data-number="9"] span.primary:before {
+  content: "9";
+}
+
+[data-number="9"] span.secondary:after {
+  content: "9";
+}
+
+[data-number="9"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="9"] span.primary:after {
+  content: attr(title);
+}
+
+/* Number 8 */
+
+[data-number="8"] span.primary:before {
+  content: "8";
+}
+
+[data-number="8"] span.secondary:after {
+  content: "8";
+}
+
+[data-number="8"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="8"] span.primary:after {
+  content: attr(title);
+}
+
+/* Number 7 */
+
+[data-number="7"] span.primary:before {
+  content: "7";
+}
+
+[data-number="7"] span.secondary:after {
+  content: "7";
+}
+
+[data-number="7"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="7"] span.primary:after {
+  content: attr(title);
+}
+
+/* Number 6 */
+
+[data-number="6"] span.primary:before {
+  content: "6";
+}
+
+[data-number="6"] span.secondary:after {
+  content: "6";
+}
+
+[data-number="6"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="6"] span.primary:after {
+  content: attr(title);
+}
+
+/* Number 5 */
+
+[data-number="5"] span.primary:before {
+  content: attr(title);
+}
+
+[data-number="5"] span.secondary:after {
+  content: attr(title);
+}
+
+[data-number="5"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="5"] span.primary:after {
+  content: attr(title);
+}
+
+/* Number 4 */
+
+[data-number="4"] span.primary:before {
+  content: "4";
+}
+
+[data-number="4"] span.secondary:after {
+  content: "4";
+}
+
+[data-number="4"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="4"] span.primary:after {
+  content: attr(title);
+}
+
+/* Number 3 */
+
+[data-number="3"] span.primary:before {
+  content: attr(title);
+}
+
+[data-number="3"] span.secondary:after {
+  content: attr(title);
+}
+
+[data-number="3"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="3"] span.primary:after {
+  content: attr(title);
+}
+
+/* Number 2 */
+
+[data-number="2"] span.primary:before {
+  content: "2";
+}
+
+[data-number="2"] span.secondary:after {
+  content: "2";
+}
+
+[data-number="2"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="2"] span.primary:after {
+  content: attr(title);
+}
+
+/* Number 1 */
+
+[data-number="1"] span.primary:before {
+  content: "1";
+}
+
+[data-number="1"] span.secondary:after {
+  content: "1";
+}
+
+[data-number="1"] span.secondary:before {
+  content: attr(title);
+}
+
+[data-number="1"] span.primary:after {
+  content: attr(title);
+}

assets/scss/style.scss

@@ -1,3 +1,6 @@
+@charset "UTF-8";
+@use 'animation';
+
 img{
   width: 100%;
 }
@@ -1121,12 +1124,38 @@ img{
       .count--num{
         display: flex;
         font-family: 'gmarketSans';
-        gap: 80px;
+        gap: 10px;
         margin-bottom: 140px;
         position: relative;
-
-
-        .bbl--eft01{
+        .number{
+          position: relative;
+          display: inline-block;
+          font-size: 120px;
+          color: #ffffff;
+          width: 140px;
+          line-height: 1.75;
+          font-weight: 800;
+          height: 210px;
+          border-radius: 20%;;
+          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
+          &:nth-child(4){
+            margin-left: 80px;
+          }
+          &:nth-child(5){
+            margin-right: 80px;
+          }
+          span{
+            display: inline-block;
+            width: 100%;
+            height: 100%;
+          }
+        }
+        &::before{
+          content: '';
+          width: 210px;
+          left: -300px;
+          top: calc(50% - 500px);
+          height: 1000px;
           position: absolute;
           top:50%;
           transform: translateY(-50%);

index.html

@@ -8,6 +8,7 @@
   <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/font-face.css" />
   <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
   <link rel="stylesheet" href="assets/css/style.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <title>스플라스 스파&워터파크</title>
 </head>
@@ -272,12 +273,51 @@
           <p>10시에 만나요 !</p>
         </div>
         <div class="count--num">
+          <span class="number" data-number="0">
+            <span class="primary">
+            </span>
+            <span class="secondary">
+            </span>
+          </span>
+          <span class="number" data-number="0">
+            <span class="primary">
+            </span>
+            <span class="secondary">
+            </span>
+          </span>
+          <span class="number" data-number="0">
+            <span class="primary">
+            </span>
+            <span class="secondary">
+            </span>
+          </span>
+          <span class="number" data-number="0">
+            <span class="primary">
+            </span>
+            <span class="secondary">
+            </span>
+          </span>
+          <span class="number" data-number="0">
+            <span class="primary">
+            </span>
+            <span class="secondary">
+            </span>
+          </span>
+          <span class="number" data-number="0">
+            <span class="primary">
+            </span>
+            <span class="secondary">
+            </span>
+          </span>
+          <span class="number" data-number="0">
+            <span class="primary">
+            </span>
+            <span class="secondary">
+            </span>
+          </span>
           <div class="bbl--eft03"></div>
           <div class="bbl--eft02"></div>
           <div class="bbl--eft01"></div>
-          <div class="hours"><span>0</span><span>1</span></div>
-          <div class="minutes"><span>0</span><span>0</span></div>
-          <div class="seconds"><span>0</span><span>0</span></div>
           <div class="bbl--eft06"></div>
           <div class="bbl--eft05"></div>
           <div class="bbl--eft04"></div>
@@ -349,56 +389,88 @@
       tabButtons[swiper.activeIndex].classList.add('active');
     });
 
-    const deadline = new Date('2025-06-05T10:00:00');
+    function updateCountdown() {
+      var now = new Date();
+      var target = new Date(now.getFullYear(), 5, 5, 10, 0, 0);
+
+      var diff = target - now;
+      if (diff < 0) diff = 0;
+
+      var seconds = Math.floor(diff / 1000) % 60;
+      var minutes = Math.floor(diff / (1000 * 60)) % 60;
+      var hours = Math.floor(diff / (1000 * 60 * 60));
+
+      // 시 3자리 분리
+      var hoursHundreds = Math.floor(hours / 100);
+      var hoursTens = Math.floor((hours % 100) / 10);
+      var hoursOnes = hours % 10;
+
+      var minutesTens = Math.floor(minutes / 10);
+      var minutesOnes = minutes % 10;
 
-    function padDigits(num) {
-      return String(num).padStart(2, '0').split('');
+      var secondsTens = Math.floor(seconds / 10);
+      var secondsOnes = seconds % 10;
+
+      // 인덱스 0부터 6까지 차례대로
+      doFlip(6, 0, secondsOnes);
+      doFlip(5, 0, secondsTens);
+      doFlip(4, 0, minutesOnes);
+      doFlip(3, 0, minutesTens);
+      doFlip(2, 0, hoursOnes);
+      doFlip(1, 0, hoursTens);
+      doFlip(0, 0, hoursHundreds);
     }
 
-    function updateCountdown() {
-      const now = new Date();
-      const diff = deadline - now;
+    // 1초마다 업데이트
+    setInterval(updateCountdown, 1000);
+    updateCountdown();
+    //real--count
+    setInterval(function() {
+      doFlip(6, 1);
+    }, 1000);
+
+    function doFlip(numberIndex, count, startNumber) {
+      if (count === undefined) {
+        count = 1;
+      }
+
+      var currentNumberElement = $(".number:eq(" + numberIndex + ")");
+
+      // 현재 저장된 숫자
+      var oldNumber = Number(currentNumberElement.attr("data-number"));    
 
-      const hourEl = document.querySelector('.hours').children;     // ← 여기에 시
-      const minEl = document.querySelector('.minutes').children;    // ← 여기에 분
-      const secEl = document.querySelector('.seconds').children;  // ← 여기에 초
+      // startNumber가 있으면 그걸 쓰고, 없으면 data-number에서 읽음
+      var currentNumber = startNumber !== undefined ? startNumber : oldNumber;
 
-      if (diff <= 0) {
-        hourEl[0].textContent = '0';
-        hourEl[1].textContent = '0';
-        minEl[0].textContent = '0';
-        minEl[1].textContent = '0';
-        secEl[0].textContent = '0';
-        secEl[1].textContent = '0';
-        clearInterval(timer);
+      // 숫자가 같으면 애니메이션 없이 그냥 리턴
+      if (currentNumber === oldNumber) {
         return;
       }
 
-      const hours = Math.floor((diff / (1000 * 60 * 60)) % 100); // 2자리 확보
-      const minutes = Math.floor((diff / (1000 * 60)) % 60);
-      const seconds = Math.floor((diff / 1000) % 60);
+      currentNumber -= count;
 
-      const [h1, h2] = padDigits(hours);
-      const [m1, m2] = padDigits(minutes);
-      const [s1, s2] = padDigits(seconds);
+      var makeAFlip = false;
 
-      animateIfChanged(hourEl[0], h1);
-      animateIfChanged(hourEl[1], h2);
-      animateIfChanged(minEl[0], m1);
-      animateIfChanged(minEl[1], m2);
-      animateIfChanged(secEl[0], s1);
-      animateIfChanged(secEl[1], s2);
-    }
+      if (currentNumber < 0) {
+        currentNumber = 10 + currentNumber;
+        makeAFlip = true;
+      }
 
-    updateCountdown();
-    const timer = setInterval(updateCountdown, 1000); // 1초마다 갱신
+      currentNumberElement.find(".primary").attr("title", currentNumber);
+      currentNumberElement.find(".secondary").attr("title", currentNumber);
 
-    function animateIfChanged(el, newVal) {
-      if (el.textContent !== newVal) {
-        el.textContent = newVal;
-        el.classList.add('flip');
-        setTimeout(() => el.classList.remove('flip'), 400); // 애니메이션 끝나면 제거
-      }
+      if (makeAFlip) {
+        if (numberIndex > 0) {
+          doFlip(--numberIndex);
+        }
+      } 
+
+      currentNumberElement.addClass("flip");
+
+      setTimeout(function() {
+        currentNumberElement.attr("data-number", currentNumber);
+        currentNumberElement.removeClass("flip");
+      }, 500);
     }
   </script>
 </body>