fix: 무한 슬라이드 애니메이션 딜레이 개선, 불필요 컴포넌트 제거

banma1234 · Jan 5, 2025 · 114f1d6 · 114f1d6
1 parent 6650163
commit 114f1d6
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 85 deletions.
diff --git a/index.html b/index.html
@@ -1,9 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <link rel="stylesheet" href="src/style/globals.css" />
+    <link rel="stylesheet" href="src/style/header.css" />
+    <link rel="stylesheet" href="src/style/main.css" />
+    <link rel="stylesheet" href="src/style/about.css" />
+    <link rel="stylesheet" href="src/style/develop.css" />
+    <link rel="stylesheet" href="src/style/design.css" />
+    <link rel="stylesheet" href="src/style/contact.css" />
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <base href="https://banma1234.github.io/portfolio/" />
     <meta
       name="theme-color"
       content="#1d212a"
@@ -21,13 +27,6 @@
     페이지입니다. 라이브러리 없이 오직 html + css + JS 만으로 구현하였습니다."
     />
     <title>박범수 포트폴리오 | 개발 & 디자인</title>
-    <link rel="stylesheet" href="src/style/globals.css" />
-    <link rel="stylesheet" href="src/style/header.css" />
-    <link rel="stylesheet" href="src/style/main.css" />
-    <link rel="stylesheet" href="src/style/about.css" />
-    <link rel="stylesheet" href="src/style/develop.css" />
-    <link rel="stylesheet" href="src/style/design.css" />
-    <link rel="stylesheet" href="src/style/contact.css" />
   </head>
   <body>
     <header>
@@ -219,11 +218,14 @@ <h2>2025 portfolio</h2>
                 <strong>vanila JS, CSS</strong>만을 이용한 싱글페이지
                 애플리케이션입니다. 모든 기능을
                 <strong>라이브러리 없이</strong> 구현하였습니다.
+                <strong>vite</strong> 번들러를 활용해 페이지의 크기를
+                줄였습니다.
               </li>
               <li>
-                ease-in, ease-out 등 <strong>transition</strong>을 수행할 때
-                <strong>bezier-curve</strong>를 적용하여 애니메이션이 사용자에게
-                보다 자연스럽게 연출되도록 구현했습니다.
+                <strong>html, CSS</strong>만으로 실제 3D 모델과 유사한
+                컴포넌트를 작성했습니다. 실제 모델보다
+                <strong>퍼포먼스</strong>가 뛰어나고 캐러셀과 같이
+                <strong>interactive</strong>한 효과를 모델에 줄 수 있습니다.
               </li>
               <li>
                 <strong>intersection observer</strong>와
@@ -279,7 +281,7 @@ <h2>2025 portfolio</h2>
                   <div class="card">
                     <img
                       id="target__img"
-                      src="src/assets/images/design_5.webp"
+                      src="src/assets/images/design_5.svg"
                       alt="design"
                     />
                   </div>
@@ -295,59 +297,6 @@ <h2>design&nbsp;&&nbsp;illust</h2>
                   <h2>design&nbsp;&&nbsp;illust</h2>
                 </div>
               </div>
-              <div class="belt__slow">
-                <div class="belt__slow__container">
-                  <div class="card">
-                    <img
-                      id="target__img"
-                      src="src/assets/images/illust_1.webp"
-                      alt="design"
-                    />
-                  </div>
-                  <div class="card">
-                    <img
-                      id="target__img"
-                      src="src/assets/images/illust_2.webp"
-                      alt="design"
-                    />
-                  </div>
-                  <div class="card">
-                    <img
-                      id="target__img"
-                      src="src/assets/images/illust_3.webp"
-                      alt="design"
-                    />
-                  </div>
-                  <div class="card">
-                    <img
-                      id="target__img"
-                      src="src/assets/images/illust_4.webp"
-                      alt="design"
-                    />
-                  </div>
-                  <div class="card">
-                    <img
-                      id="target__img"
-                      src="src/assets/images/illust_5.webp"
-                      alt="design"
-                    />
-                  </div>
-                  <div class="card">
-                    <img
-                      id="target__img"
-                      src="src/assets/images/illust_6.webp"
-                      alt="design"
-                    />
-                  </div>
-                  <div class="card">
-                    <img
-                      id="target__img"
-                      src="src/assets/images/illust_7.webp"
-                      alt="design"
-                    />
-                  </div>
-                </div>
-              </div>
             </div>
           </div>
         </article>

diff --git a/src/script/global.js b/src/script/global.js
@@ -19,7 +19,7 @@ let count = 0;
 const CAROUSEL = document.querySelectorAll(".carousel");
 
 function changeImage(idx) {
-  CAROUSEL.forEach((item) => {
+  CAROUSEL.forEach(item => {
     item.style.transform = `translateX(-${260 * idx}px)`;
   });
 }
@@ -39,7 +39,7 @@ const modalClose = document.getElementById("modal_close");
 function setTargetImage() {
   const IMAGES = document.querySelectorAll("#target__img");
 
-  IMAGES.forEach((img) => {
+  IMAGES.forEach(img => {
     img.addEventListener("click", () => {
       body.classList.add("scrollLock");
       modal.classList.add("activate");
@@ -58,20 +58,20 @@ modalClose.addEventListener("click", () => {
 //#endregion
 
 const belt = document.querySelector(".belt__container");
-const belt__slow = document.querySelectorAll(".belt__slow__container");
 
 const clone = belt.cloneNode(true);
-belt__slow.forEach((belt, i) => {
-  const clone_2 = belt.cloneNode(true);
-  document.querySelectorAll(".belt__slow")[i].appendChild(clone_2);
-  document.querySelectorAll(".belt__slow__container")[i].offsetWidth + "px";
-
-  belt.classList.add("original");
-  clone_2.classList.add("clone");
-});
 
 document.querySelector(".belt").appendChild(clone);
 document.querySelector(".belt__container").offsetWidth + "px";
 
 belt.classList.add("original");
 clone.classList.add("clone");
+
+const belt__slow = document.querySelector(".belt__slow__container");
+const clone_2 = belt__slow.cloneNode(true);
+
+document.querySelector(".belt__slow").appendChild(clone_2);
+document.querySelector(".belt__slow__container").offsetWidth + "px";
+
+belt__slow.classList.add("original");
+clone_2.classList.add("clone");
diff --git a/src/style/design.css b/src/style/design.css
@@ -24,10 +24,9 @@
 }
 .belt__slow {
   display: flex;
-  overflow: hidden;
-  flex-direction: row;
   align-items: center;
-  justify-content: center;
+  width: 100%;
+  overflow: hidden;
 }
 .belt__slow .belt__slow__container,
 .belt .belt__container {
@@ -38,18 +37,21 @@
 .belt .belt__container.original {
   animation: 25s linear 0s infinite normal forwards running slide01;
 }
-.belt__slow .belt__slow__container.original {
-  animation: 50s linear 0s infinite normal forwards running slide01;
-}
 .belt .belt__container.clone {
   animation: 25s linear 0s infinite normal none running slide02;
 }
-.belt__slow .belt__slow__container.clone {
-  animation: 50s linear 0s infinite normal none running slide02;
-}
+
 .belt .belt__container h2 {
   margin: 0 1.5rem;
 }
+
+.belt__slow .belt__slow__container.original {
+  animation: 50s linear 0s infinite normal forwards running slide01;
+}
+.belt__slow .belt__slow__container.clone {
+  animation: 50s linear 0s infinite normal none running slide02;
+}
+
 @keyframes slide01 {
   0% {
     transform: translateX(0);