수정

css/fishing.css

@@ -24,7 +24,7 @@ body {
 ::-webkit-scrollbar { display: none; } */
 
 ul, li{ list-style: none; }
-a{ text-decoration: none; }
+a{ text-decoration: none; color: inherit;}
 img{ display: block; }
 table{ border-spacing: 0; }
 .inner{
@@ -42,6 +42,7 @@ header{
     left: 0;
     z-index: 100;
     transition: all 0.3s;
+    color: #fff;
 }
 header .hinner{
     width: 1800px;
@@ -51,19 +52,19 @@ header .hinner{
     align-items: center;
     justify-content: center;
 }
-nav{ margin: 0 300px; }
+nav{ margin: 0 300px; height: 100%;}
-.gnb{ display: flex; }
+.gnb{ display: flex; height: 100%;}
 .gnb > li{
+    height: 100%;
     margin: 0 65px 0 0;
     position: relative;
 }
 .gnb > li:last-child{ margin: 0; }
 .gnb > li > a{
     display: block;
-    height: 80px;
+    height: 100%;
     text-align: center;
     font-size: 18px;
-    color: #fff;
     font: 600 18px 'pretendard', 'sans-serif';
     line-height: 80px;
     text-shadow: 1px 1px 1px #333333;
@@ -118,15 +119,16 @@ nav{ margin: 0 300px; }
 }
 .question p{
     font: 400 14px 'pretendard', 'sans-serif';
-    color: #fff;
 }
 
 header.on{
     height: 70px;
     border-bottom: 1px solid #eeeeee;
+    color: #111111;
+    background-color: #fff;
 }
-header .logo{ display: none; }
+header .wlogo, .blogo{ display: none; }
-header .logo.on{ display: block; }
+header .logowrap > img.on{ display: block; }
 
 /*풀페이지 슬라이더*/
 /* .fullslider{ height: 100%; } */
@@ -357,7 +359,11 @@ header .logo.on{ display: block; }
 }
 
 /*sec03*/
-.sec03{ background: url(../images/main/main-background3.png) no-repeat center / cover; }
+.sec03{
+    background: url(../images/main/main-background3.png) no-repeat center / cover; 
+    position: relative;
+    overflow: hidden;
+}
 .sec03 .inner {
     flex-direction: column;
     justify-content: center;
@@ -394,6 +400,7 @@ header .logo.on{ display: block; }
     border-radius: 45px;
     border: 1.5px solid #fff;
     font-family: 'pretendard', 'sans-serif';
+    cursor: pointer;
 }
 .sec03 .inner > div > button > span{ padding: 0 20px; }
 .sec03 .inner > div > button > .material-symbols-outlined {
@@ -404,6 +411,49 @@ header .logo.on{ display: block; }
     'opsz' 48
 }
 
+/*sec03 물결*/
+.sec03 .box{
+    position: absolute;
+    bottom: 100px;
+}
+.sec03 .box:nth-child(2){
+    bottom: 0px;
+}
+.sec03 .box .wave{
+    opacity: .1;
+    position: absolute;
+    background-color: #0af;
+    top: 0;
+    transform-origin: 50% 48%;
+    border-radius: 50%;
+    animation: drift 3000ms infinite linear;
+}
+.sec03 .box:first-child .wave{
+    width: 2000px;
+    height: 2000px;
+    left: -700px;
+}
+.sec03 .box:nth-child(2) .wave{
+    width: 4000px;
+    height: 4000px;
+    left: -300px;
+}
+.sec03 .box .wave.two{
+    animation: drift 7000ms infinite linear;
+    opacity: .1;
+
+}
+.sec03 .box .wave.there{
+    animation: drift 5000ms infinite linear;
+    opacity: .1;
+}
+
+
+@keyframes drift {
+    from { transform: rotate(0deg); }
+    from { transform: rotate(360deg); }
+}
+
 /*sec04*/
 .sec04{
     background: url(../images/main/main-background4.png) no-repeat center / cover;
@@ -521,6 +571,84 @@ header .logo.on{ display: block; }
   font-size: 35px;
 }
 
+/*topBt*/
+.topBt{
+    position: fixed;
+    right: 50px;
+    bottom: 40px;
+    z-index: 500;
+    cursor: pointer;
+    display: none;
+}
+.topBt.on{ display: block; }
+.btwrap{
+    width: 25px;
+    height: 55px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    position: relative;
+    overflow: hidden;
+}
+.btwrap > div:first-child{
+    width: 45px;
+    height: 45px;
+    background-color: #0047FF;
+    clip-path: ellipse(27% 50% at 50% 50%);
+}
+.btwrap > div:nth-child(2){
+    width: 20px;
+    height: 24px;
+    /* background-color: #0047FF; */
+    border-bottom: 20px solid #0047FF;
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
+    border-radius: 10px;
+    position: absolute;
+    bottom: 0px;
+    animation: vibration .8s infinite; 
+}
+
+@keyframes vibration {
+    0% { transform: rotate(0deg); }
+    50% { transform: rotate(4deg); }
+    100%{ transform: rotate(-4deg); }   
+}
+
+svg{
+    position: absolute;
+    bottom: -100px;
+}
+.btwrap .eye{
+    width: 5px;
+    height: 5px;
+    background-color: #fff;
+    border-radius: 50%;
+    offset-path: path('m 10 30 Q 5 24 11 16 Q 16 9 12 3');
+    offset-distance: 0%;
+    position: absolute;
+    top: -15px;
+    left: 5px;
+    transition: all .3s;
+}
+.btwrap:hover .eye{
+    animation: eye .3s linear alternate forwards;
+}
+.btwrap > p{
+    position: absolute;
+    bottom: -40px;
+    text-align: center;
+    font-size: 5px;
+    color: #fff;
+    transition: all 0.5s;
+}
+.btwrap:hover > p{ bottom: 8px; }
+@keyframes eye {
+from { offset-distance: 0%; }
+to { offset-distance: 100%; }
+}
+
 /*footer*/
 footer{
     background-color: #111827;

legendaryFishing.html

@@ -13,11 +13,11 @@
     <title>Legend Fishing</title>
 </head>
 <body>
-    <header class="on">
+    <header>
         <div class="hinner">
-            <a href="./legendaryFishing.html">
+            <a class="logowrap" href="./legendaryFishing.html">
-                <img class="logo on" src="./images/logo/logo-head_white.png" alt="헤더로고화이트">
+                <img class="wlogo on" src="./images/logo/logo-head_white.png" alt="헤더로고화이트">
-                <img class="logo" src="./images/logo/logo-head_black.png" alt="헤더로고블랙">
+                <img class="blogo" src="./images/logo/logo-head_black.png" alt="헤더로고블랙">
             </a>
             <nav>
                 <ul class="gnb">
@@ -308,6 +308,16 @@
             </section>
             <!-- 전설의 낚시 소개 -->
             <section class="swiper-slide sec03">
+                <div class="box">
+                    <div class='wave one'></div>
+                    <div class='wave two'></div>
+                    <div class='wave there'></div>
+                </div>
+                <div class="box">
+                    <div class='wave one'></div>
+                    <div class='wave two'></div>
+                    <div class='wave there'></div>
+                </div>
                 <div class="inner">
                     <div>
                         <p>FISHING OF LEGEND</p>
@@ -381,9 +391,17 @@
             </section>    
         </div>
     </div>
-    <!-- <div class="topBt">
+    <div class="topBt">
-        <a href="#"></a>
+        <div class="btwrap">
-    </div> -->
+            <div></div>
+            <div></div>
+            <svg width="100px" height="100px">
+                <path fill="transparent" stroke="transparent" stroke-width="1" d="m 10 30 Q 5 24 11 16 Q 16 9 12 3" class="path"></path>
+            </svg>
+            <div class="eye"></div>
+            <p>T<br>O<br>P</p>
+        </div>
+    </div>
     <footer class="on">
         <div class="inner">
             <a href="./legendaryFishing.html">
@@ -407,7 +425,11 @@
             });
         })
     </script>
-    <!-- 스와이퍼 / header / scroll 관련 이벤트-->
+
+    <!-- topbt -->
+
+
+    <!-- 스와이퍼 / header / topBt / scroll 관련 이벤트-->
     <script src="./script/scroll.js"></script>
 </body>
 </html>

script/scroll.js

@@ -6,33 +6,11 @@ $(function(){
             el: ".swiper-pagination",
         }
     });
-    //풀스크린 스와이퍼
-    // var fullPageSwiper = new Swiper(".fullslider", {
-    //     direction: "vertical",
-    //     slidesPerView: 1,
-    //     mousewheel: true,
-    //     speed: 500,
-    //     on: {
-    //         //마지막 슬라이드
-    //         reachEnd: function() {
-    //             fullPageSwiper.mousewheel.disable();
-    //             $("footer").addClass("on");
-    //         }
-    //     }
-    // });
-    // window.addEventListener("wheel", function(e){
-    //     if(e.deltaY < 0){
-    //         fullPageSwiper.mousewheel.enable();
-    //         $("footer").removeClass("on");
-    //     }else if(e.deltaY > 0){
-    //         return false;
-    //     }
-    // });
 
     //풀스크린 슬라이드
-    window.addEventListener("wheel", function(e){
+    // window.addEventListener("wheel", function(e){
-        e.preventDefault();
+    //     e.preventDefault();
-    }, {passive : false});
+    // }, {passive : false});
 
     let page = 0;
     $("html").animate({scrollTop : 0}, 300, "swing");
@@ -54,12 +32,28 @@ $(function(){
         //a링크 등을 타고 최상단으로 이동시 page 초기화
         if($(window).scrollTop() == 0) page = 0;
 
-        //header
+        //header / top
         if(page > 0){
-            //css 변하는 헤더 스타일 입력하기, on 클래스 붙이기
+            $(".topBt").addClass("on");
+            
+            $("header").addClass("on");
+            $(".gnb > li > a").css({"line-height":"70px", "text-shadow":"none"});
+            $(".blogo").addClass("on");
+            $(".wlogo").removeClass("on");
+
         } else{
-            //on 클래스 떼기
+            $(".topBt").removeClass("on");
+            $("header").removeClass("on");
+            $(".gnb > li > a").css({"line-height":"", "text-shadow":""});
+            $(".blogo").removeClass("on");
+            $(".wlogo").addClass("on");
+
         }
+    });
+
+    $(".topBt").on("click", function(){
+        $("html").animate({scrollTop : 0}, 400, "swing");
+        return false;
     })
 })