fix

fdgh134 · Jul 18, 2024 · 7bbb25f · 7bbb25f
1 parent 57a9b56
commit 7bbb25f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 4 deletions.
diff --git a/css/workout_joid.css b/css/workout_joid.css
@@ -141,7 +141,7 @@
   margin-bottom: 1.5vh;
 }
 .detail_page{
-  width: 100%;
+  width: 60%;
   background-size: cover;
   margin: 0 auto;
   border-radius: 1rem;

diff --git a/js/workout2.js b/js/workout2.js
@@ -0,0 +1,60 @@
+$(function(){
+
+  $('.line').addClass("lineafter").addClass("linebefore");
+
+  setTimeout(function(){
+    $('.work_detail, .detail_inner').removeClass("none");
+    $('.detail_inner').addClass("animate__fadeInUp");
+    $('.line').removeClass("none");
+  },2000);
+  /* 마우스 스크롤 이벤트 */
+
+  let isRotatedOut = false;
+
+  window.addEventListener('scroll', function () {
+    let value = window.scrollY;
+    console.log("scrollY", value);
+
+    if (value > 399 && !isRotatedOut) {
+      isRotatedOut = true;
+      $('.mockup').removeClass("animate__fadeInUp").removeClass("animate__fadeInDown").addClass("animate__fadeOutUp");
+      $('.discription').removeClass("animate__fadeInUp").removeClass("animate__delay-1s").removeClass("animate__fadeInUp").addClass("animate__fadeOutUp");
+      $('.detail_inner').removeClass("animate__fadeOutDown").addClass("animate__fadeInUp");
+    } else if (value <= 400 && isRotatedOut) {
+      isRotatedOut = false;
+      $('.mockup').removeClass("animate__fadeOutUp").addClass("animate__fadeInDown");
+      $('.discription').removeClass("animate__fadeOutUp").addClass("animate__fadeInDown");
+      $('.detail_inner').removeClass("animate__fadeInUp").addClass("animate__fadeOutDown");
+    } else if (value >= 800) {
+      $('.other_project, .contact').removeClass("none").removeClass("animate__fadeOutDown").addClass("animate__animated").addClass("animate__fadeInUp");
+    } else if (value < 800){
+      $('.other_project, .contact').removeClass("animate__fadeInUp").removeClass("animate__fadeOutDown").addClass("animate__fadeOutDown");
+    } 
+
+  });
+
+  $(".infobtn1").click(function(){
+    window.open("https://www.metainno.co.kr/");
+  });
+  $(".infobtn2").click(function(){
+    window.open("https://robot.metainno.co.kr/");
+  });
+  $(".infobtn3").click(function(){
+    window.open("https://morder.metainno.co.kr/");
+  });
+  $(".infobtn4").click(function(){
+    window.open("https://corp.metainno.co.kr/");
+  });
+  $(".infobtn5").click(function(){
+    window.open("http://yoomin102.dothome.co.kr/");
+  });
+  $(".infobtn6").click(function(){
+    window.open("http://snfour4.dothome.co.kr/");
+  });
+  $(".infobtn7").click(function(){
+    window.open("http://snfour5.dothome.co.kr/");
+  });
+  $(".infobtn8").click(function(){
+    window.open("http://glox.co.kr/");
+  });
+});
diff --git a/work/joid.html b/work/joid.html
@@ -67,9 +67,13 @@ <h3>JOID 어플리케이션 UIUX</h3>
     <div class="work_detail none">
       <div class="detail_inner animate__animated none">
         <div class="detail_page">
-          <img src="../img/zin_main.png" alt="">
+          <img src="../img/uiux/joid-1.png" alt="">
+          <img src="../img/uiux/joid-2.png" alt="">
+          <img src="../img/uiux/joid-3.png" alt="">
+          <img src="../img/uiux/joid-4.png" alt="">
+          <img src="../img/uiux/joid-5.png" alt="">
+          <img src="../img/uiux/joid-6.png" alt="">
         </div>
-        <div class="btnframe"><button class="custom-btn infobtn infobtn6">홈페이지</button></div>
       </div>
     </div>
     <div class="line line2 none"></div>
@@ -105,7 +109,7 @@ <h4>Other Project</h4>
   </div>
   <!--본문영역 끝-->
   <script src="../js/imagesloaded.pkgd.min.js"></script>
-  <script src="../js/workout.js"></script>
+  <script src="../js/workout2.js"></script>
   <script src="../js/introduce.js"></script>
   <script src="../js/common.js"></script>
   <script src="../js/splitting.min.js"></script>