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

수정 슬라이드/탭

master
leejimin 3 years ago
parent
5984be7085
commit
5dc58ab570
3 changed files with 186 additions and 28 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 Download Patch File Download Diff File
  1. 34
      css/fishing.css
  2. 115
      legendaryFishing.html
  3. 65
      script/scroll.js

34
css/fishing.css
Unescape View File

@ -16,6 +16,13 @@ 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; }
@ -34,6 +41,7 @@ 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;
@ -113,14 +121,22 @@ 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*/
@ -241,8 +257,9 @@ nav{ margin: 0 300px; }
line-height: 25px; line-height: 25px;
color: #12B9FF; color: #12B9FF;
} }
.sec02 .left .top > .tap > span:nth-child(1).on{ .sec02 .left .top > .tap > span.on{
background-color: #12B9FF; background-color: #12B9FF;
outline: 1px solid #12B9FF;
color: #fff; color: #fff;
} }
.sec02 .left .top > span{ .sec02 .left .top > span{
@ -259,6 +276,7 @@ nav{ margin: 0 300px; }
.sec02 .contents{ .sec02 .contents{
width: 100%; width: 100%;
height: 540px; height: 540px;
display: none;
} }
.sec02 .contents table{ .sec02 .contents table{
width: 100%; width: 100%;
@ -287,6 +305,8 @@ nav{ margin: 0 300px; }
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;
@ -388,6 +408,7 @@ nav{ margin: 0 300px; }
.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;
@ -504,7 +525,14 @@ nav{ margin: 0 300px; }
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;
@ -524,4 +552,4 @@ footer .copyright{
position: absolute; position: absolute;
right: 0; right: 0;
top: 90px; top: 90px;
} }

115
legendaryFishing.html
Unescape View File

@ -13,10 +13,11 @@
<title>Legend Fishing</title> <title>Legend Fishing</title>
</head> </head>
<body> <body>
<header> <header class="on">
<div class="hinner"> <div class="hinner">
<a href="./legendaryFishing.html"> <a href="./legendaryFishing.html">
<img src="./images/logo/logo-head_white.png" alt="헤더로고"> <img class="logo on" 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">
@ -129,13 +130,13 @@
<div class="top"> <div class="top">
<h3>랭킹</h3> <h3>랭킹</h3>
<div class="tap"> <div class="tap">
<span class="on">주간</span> <span data-id="week" class="on">주간</span>
<span>월간</span> <span data-id="month">월간</span>
</div> </div>
<span>주간랭킹 2022. 03. 1주차</span> <span>주간랭킹 2022. 03. 1주차</span>
<a href="#">더보기→</a> <a href="#">더보기→</a>
</div> </div>
<div class="contents"> <div id="week" class="contents on">
<table> <table>
<tr> <tr>
<th>순위</th> <th>순위</th>
@ -205,6 +206,76 @@
</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">
@ -310,7 +381,10 @@
</section> </section>
</div> </div>
</div> </div>
<footer> <!-- <div class="topBt">
<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="푸터로고">
@ -323,26 +397,17 @@
<p class="copyright">Copyrights2022 ⓒ 전설의 낚시, All rights Reserved</p> <p class="copyright">Copyrights2022 ⓒ 전설의 낚시, All rights Reserved</p>
</div> </div>
</footer> </footer>
<!-- sec02 -->
<script> <script>
//sec01 슬라이더 $(function(){
var sec01Swiper = new Swiper(".banner", { //랭킹 탭
loop: true, $(".sec02 .tap > span").on("click", function(){
pagination: { $(this).addClass("on").siblings().removeClass("on");
el: ".swiper-pagination", $("#"+$(this).data("id")).addClass("on").siblings().removeClass("on");
} });
}); })
//풀페이지 슬라이더
var fullPageSwiper = new Swiper(".fullslider", {
direction: "vertical",
slidesPerView: 1,
mousewheel: true,
speed: 500,
});
</script> </script>
<script src="./script/fishing.js"></script> <!-- 스와이퍼 / header / scroll 관련 이벤트-->
<script src="./script/scroll.js"></script>
</body> </body>
</html> </html>

65
script/scroll.js
Unescape View File

@ -0,0 +1,65 @@
$(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