hyohyo0803
/
JMStudy
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Compare commits

base: hyohyo0803:365686f44d41707c879644a7e7f3a5556fa5df29
Branches Tags
hyohyo0803:master
..
compare: hyohyo0803:5984be7085a891451e35b1c746319e879be18dea
Branches Tags
hyohyo0803:master

No commits in common. '365686f44d41707c879644a7e7f3a5556fa5df29' and '5984be7085a891451e35b1c746319e879be18dea' have entirely different histories.
365686f44d ... 5984be7085

4 changed files with 28 additions and 186 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats
  1. 34
      css/fishing.css
  2. 115
      legendaryFishing.html
  3. 0
      script/fishing.js
  4. 65
      script/scroll.js

34
css/fishing.css
Unescape View File

@ -16,13 +16,6 @@ body {
position: relative; position: relative;
height: 100%; height: 100%;
} }
/* html{
scroll-behavior: smooth;
} */
/*스크롤바 감추기*/
/* body{ -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; } */
ul, li{ list-style: none; } ul, li{ list-style: none; }
a{ text-decoration: none; } a{ text-decoration: none; }
img{ display: block; } img{ display: block; }
@ -41,7 +34,6 @@ header{
top: 0; top: 0;
left: 0; left: 0;
z-index: 100; z-index: 100;
transition: all 0.3s;
} }
header .hinner{ header .hinner{
width: 1800px; width: 1800px;
@ -121,22 +113,14 @@ nav{ margin: 0 300px; }
color: #fff; color: #fff;
} }
header.on{
height: 70px;
border-bottom: 1px solid #eeeeee;
}
header .logo{ display: none; }
header .logo.on{ display: block; }
/*풀페이지 슬라이더*/ /*풀페이지 슬라이더*/
/* .fullslider{ height: 100%; } */ .fullslider{ height: 100%; }
.wrap > .swiper-wrapper{ .wrap > .swiper-wrapper{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.wrap .swiper-wrapper .swiper-slide{ .wrap .swiper-wrapper .swiper-slide{
width: 100%; width: 100%;
height: 100vh;
} }
/*sec01*/ /*sec01*/
@ -257,9 +241,8 @@ header .logo.on{ display: block; }
line-height: 25px; line-height: 25px;
color: #12B9FF; color: #12B9FF;
} }
.sec02 .left .top > .tap > span.on{ .sec02 .left .top > .tap > span:nth-child(1).on{
background-color: #12B9FF; background-color: #12B9FF;
outline: 1px solid #12B9FF;
color: #fff; color: #fff;
} }
.sec02 .left .top > span{ .sec02 .left .top > span{
@ -276,7 +259,6 @@ header .logo.on{ display: block; }
.sec02 .contents{ .sec02 .contents{
width: 100%; width: 100%;
height: 540px; height: 540px;
display: none;
} }
.sec02 .contents table{ .sec02 .contents table{
width: 100%; width: 100%;
@ -305,8 +287,6 @@ header .logo.on{ display: block; }
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
} }
.sec02 .contents.on{ display: block; }
.sec02 .right .event, .sec02 .right .event,
.sec02 .right .notice{ .sec02 .right .notice{
position: relative; position: relative;
@ -408,7 +388,6 @@ header .logo.on{ display: block; }
.sec04{ .sec04{
background: url(../images/main/main-background4.png) no-repeat center / cover; background: url(../images/main/main-background4.png) no-repeat center / cover;
position: relative; position: relative;
margin-top: 1px;
} }
.sec04 .inner{ .sec04 .inner{
flex-direction: column; flex-direction: column;
@ -525,14 +504,7 @@ header .logo.on{ display: block; }
footer{ footer{
background-color: #111827; background-color: #111827;
width: 100%; width: 100%;
/* height: 160px; */
overflow: hidden;
height: 0;
transition: height 0.1s;
}
footer.on{
height: 160px; height: 160px;
transition: height 0.1s;
} }
footer .inner{ footer .inner{
align-items: center; align-items: center;
@ -552,4 +524,4 @@ footer .copyright{
position: absolute; position: absolute;
right: 0; right: 0;
top: 90px; top: 90px;
} }

115
legendaryFishing.html
Unescape View File

@ -13,11 +13,10 @@
<title>Legend Fishing</title> <title>Legend Fishing</title>
</head> </head>
<body> <body>
<header class="on"> <header>
<div class="hinner"> <div class="hinner">
<a href="./legendaryFishing.html"> <a href="./legendaryFishing.html">
<img class="logo on" src="./images/logo/logo-head_white.png" alt="헤더로고화이트"> <img src="./images/logo/logo-head_white.png" alt="헤더로고">
<img class="logo" src="./images/logo/logo-head_black.png" alt="헤더로고블랙">
</a> </a>
<nav> <nav>
<ul class="gnb"> <ul class="gnb">
@ -130,13 +129,13 @@
<div class="top"> <div class="top">
<h3>랭킹</h3> <h3>랭킹</h3>
<div class="tap"> <div class="tap">
<span data-id="week" class="on">주간</span> <span class="on">주간</span>
<span data-id="month">월간</span> <span>월간</span>
</div> </div>
<span>주간랭킹 2022. 03. 1주차</span> <span>주간랭킹 2022. 03. 1주차</span>
<a href="#">더보기→</a> <a href="#">더보기→</a>
</div> </div>
<div id="week" class="contents on"> <div class="contents">
<table> <table>
<tr> <tr>
<th>순위</th> <th>순위</th>
@ -206,76 +205,6 @@
</tr> </tr>
</table> </table>
</div> </div>
<div id="month" class="contents">
<table>
<tr>
<th>순위</th>
<th>닉네임</th>
<th>적립포인트</th>
<th>총 적립포인트</th>
</tr>
<tr>
<td>1</td>
<td>전설의 낚시</td>
<td>15,400</td>
<td>52,300</td>
</tr>
<tr>
<td>2</td>
<td>초코나무</td>
<td>11,200</td>
<td>38,600</td>
</tr>
<tr>
<td>3</td>
<td>김전설</td>
<td>6,400</td>
<td>12,200</td>
</tr>
<tr>
<td>4</td>
<td>하트연어</td>
<td>2,200</td>
<td>22,500</td>
</tr>
<tr>
<td>5</td>
<td>김전설</td>
<td>1,800</td>
<td>2,300</td>
</tr>
<tr>
<td>6</td>
<td>낚시의신</td>
<td>1,700</td>
<td>8,300</td>
</tr>
<tr>
<td>7</td>
<td>캡틴아메리카</td>
<td>1,300</td>
<td>1,300</td>
</tr>
<tr>
<td>8</td>
<td>세월을낚는사람</td>
<td>1,100</td>
<td>6,300</td>
</tr>
<tr>
<td>9</td>
<td>루어루어</td>
<td>900</td>
<td>3,800</td>
</tr>
<tr>
<td>10</td>
<td>피싱마스터</td>
<td>860</td>
<td>4,900</td>
</tr>
</table>
</div>
</div> </div>
<div class="right"> <div class="right">
<div class="event"> <div class="event">
@ -381,10 +310,7 @@
</section> </section>
</div> </div>
</div> </div>
<!-- <div class="topBt"> <footer>
<a href="#"></a>
</div> -->
<footer class="on">
<div class="inner"> <div class="inner">
<a href="./legendaryFishing.html"> <a href="./legendaryFishing.html">
<img src="./images/logo/main-5-footer_logo-bx.png" alt="푸터로고"> <img src="./images/logo/main-5-footer_logo-bx.png" alt="푸터로고">
@ -397,17 +323,26 @@
<p class="copyright">Copyrights2022 ⓒ 전설의 낚시, All rights Reserved</p> <p class="copyright">Copyrights2022 ⓒ 전설의 낚시, All rights Reserved</p>
</div> </div>
</footer> </footer>
<!-- sec02 -->
<script> <script>
$(function(){ //sec01 슬라이더
//랭킹 탭 var sec01Swiper = new Swiper(".banner", {
$(".sec02 .tap > span").on("click", function(){ loop: true,
$(this).addClass("on").siblings().removeClass("on"); pagination: {
$("#"+$(this).data("id")).addClass("on").siblings().removeClass("on"); el: ".swiper-pagination",
}); }
}) });
//풀페이지 슬라이더
var fullPageSwiper = new Swiper(".fullslider", {
direction: "vertical",
slidesPerView: 1,
mousewheel: true,
speed: 500,
});
</script> </script>
<!-- 스와이퍼 / header / scroll 관련 이벤트--> <script src="./script/fishing.js"></script>
<script src="./script/scroll.js"></script>
</body> </body>
</html> </html>

0
script/fishing.js
Unescape View File

65
script/scroll.js
Unescape View File

@ -1,65 +0,0 @@
$(function(){
//sec01 스와이퍼
var sec01Swiper = new Swiper(".banner", {
loop: true,
pagination: {
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){
e.preventDefault();
}, {passive : false});
let page = 0;
$("html").animate({scrollTop : 0}, 300, "swing");
$(window).on("wheel", function(e){
if($("html").is(":animated")) return;
if(e.originalEvent.deltaY > 0){
if(page == 4) return;
page++;
} else if(e.originalEvent.deltaY < 0){
if(page == 0) return;
page--;
}
let posTop = page * $(window).height();
$("html").animate({scrollTop : posTop}, 400, "swing");
});
$(window).on("scroll", function(){
//a링크 등을 타고 최상단으로 이동시 page 초기화
if($(window).scrollTop() == 0) page = 0;
//header
if(page > 0){
//css 변하는 헤더 스타일 입력하기, on 클래스 붙이기
} else{
//on 클래스 떼기
}
})
})
Write Preview
Loading…
Cancel
Save