가로, 세로가 100%인 페이지 슬라이드 입니다.
html, body에 overflow:hidden을 해 스크롤이 없이
마우스 휠과 퀵버튼을 눌러 각 섹션으로 슬라이드가 됩니다.
페이지 마지막에 전체코드파일 첨부해두었습니다.
먼저 각 페이지들의 css입니다.
body와 html에 꼭 height:100%를 하셔야 풀페이지로 됩니다.
html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;font-family:sans-serif;}
#fullpage {position:relative;top:0px;z-index:9;width:100%;height:100%;}
.fullsection{width:100%;height:100%;position:relative;}
.full1{background:red;}
.full2{background:yellow;}
.full3{background:green;}
.full4{background:blue;}
.full5{background:purple;}
#fullpage span{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:4em;font-weight:bold;}
.full2 span{color:#000;}
그리고 퀵버튼 css입니다.
addClass로 on 클래스를 더해주면 페이지 번호에 따른 퀵버튼의 배경색이 입혀집니다.
ul, li{margin:0;padding:0;list-style:none}
.quick {position:fixed;right:20px;top:50%;transform:translateY(-50%); z-index:100000}
.quick li {width:10px;height:10px;margin-bottom:10px; border-radius:15px;border:2px solid #fff;cursor:pointer;}
.quick .on {background:#fff;}
HTML 코드입니다.
jquery.easing.min.js을 첨부하셔야합니다.
<body>
<div id="fullpage">
<div class='quick'><ul></ul></div>
<div class="fullsection full1" pageNum="1"><span>1 PAGE</span></div>
<div class="fullsection full2" pageNum="2"><span>2 PAGE</span></div>
<div class="fullsection full3" pageNum="3"><span>3 PAGE</span></div>
<div class="fullsection full4" pageNum="4"><span>4 PAGE</span></div>
<div class="fullsection full5" pageNum="5"><span>5 PAGE</span></div>
</div>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
jquery 코드입니다.
꼼꼼하게 주석 달아두었으니 차근차근 보시면서 이해하시면 좋을듯합니다.
for문에서 이동하려는 페이지 길이와 그 이전 페이지 길이를 더한 위치로 이동하는 방식입니다.
그리고 브라우저의 크기가 달라져 resize 될때마다 스크롤위치는 그대로이나
페이지들의 100%길이가 달라져 스크롤 위치가 페이지 위치가 맞지 않은 상황을 고려하여
마지막 부분에 resize가 될때마다 스크롤 위치도 조정해 주었습니다.
$(document).ready(function(){
fullset();
quickClick();
});
function fullset(){
var pageindex = $("#fullpage > .fullsection").size(); //fullpage 안에 섹션이(.fullsection) 몇개인지 확인하기
for(var i=1;i<=pageindex;i++){
$("#fullpage > .quick > ul").append("<li></li>");
}
$("#fullpage .quick ul :first-child").addClass("on"); //일단 화면이 로드 되었을때는 퀵버튼에 1번째에 불이 들어오게
//마우스 휠 이벤트
$(window).bind("mousewheel", function(event){
var page = $(".quick ul li.on");
//alert(page.index()+1); // 현재 on 되어있는 페이지 번호
if($("body").find("#fullpage:animated").length >= 1) return false;
//마우스 휠을 위로
if(event.originalEvent.wheelDelta >= 0) {
var before=page.index();
if(page.index() >= 0) page.prev().addClass("on").siblings(".on").removeClass("on");//퀵버튼옮기기
var pagelength=0;
for(var i=1; i<(before); i++)
{
pagelength += $(".full"+i).height();
}
if(page.index() > 0){ //첫번째 페이지가 아닐때 (index는 0부터 시작임)
page=page.index()-1;
$("#fullpage").animate({"top": -pagelength + "px"},1000, "swing");
}else{
alert("첫번째페이지 입니다.");
}
}else{ // 마우스 휠을 아래로
var nextPage=parseInt(page.index()+1); //다음페이지번호
var lastPageNum=parseInt($(".quick ul li").size()); //마지막 페이지번호
//현재페이지번호 <= (마지막 페이지 번호 - 1)
//이럴때 퀵버튼옮기기
if(page.index() <= $(".quick ul li").size()-1){
page.next().addClass("on").siblings(".on").removeClass("on");
}
if(nextPage < lastPageNum){ //마지막 페이지가 아닐때만 animate !
var pagelength=0;
for(var i = 1; i<(nextPage+1); i++){
//총 페이지 길이 구하기
//ex) 현재 1번페이지에서 2번페이지로 내려갈때는 1번페이지 길이 + 2번페이지 길이가 더해짐
pagelength += $(".full"+i).height();
}
$("#fullpage").animate({"top": -pagelength + "px"},1000, "swing");
}
else{ // 현재 마지막 페이지 일때는
alert("마지막 페이지 입니다!");
};
}
});
$(window).resize(function(){
//페이지가 100%이기때문에 브라우저가 resize 될때마다 스크롤 위치가 그대로 남아있는것을 방지하기 위해
var resizeindex = $(".quick ul li.on").index()+1;
var pagelength=0;
for(var i = 1; i<resizeindex; i++){
//총 페이지 길이 구하기
//ex) 현재 1번페이지에서 2번페이지로 내려갈때는 1번페이지 길이 + 2번페이지 길이가 더해짐
pagelength += $(".full"+i).height();
}
$("#fullpage").animate({"top": -pagelength + "px"},0);
});
}
// 사이드 퀵버튼 클릭 이동
function quickClick(){
$(".quick li").click(function(){
var gnbindex = $(this).index()+1;
var length=0;
for(var i=1; i<(gnbindex); i++)
{
length+=$(".full"+i).height();
}
if($("body").find("#fullpage:animated").length >= 1) return false;
$(this).addClass("on").siblings("li").removeClass("on");
$("#fullpage").animate({"top": -length + "px"},800, "swing");
return false;
});
}
'coding > web' 카테고리의 다른 글
| jquery 메뉴바 스크롤 내렸을때 스타일변경 (4) | 2020.04.03 |
|---|---|
| css 마우스오버시에 둥둥 뜨는 아이콘 transform, box-shadow animation (0) | 2020.03.31 |
| 초초초 초간단 기본 반응형 갤러리 responsive gallery (ul li) (0) | 2020.03.24 |
| javascript select의 option 옵션 년,월 에 맞춰 마지막 날 select option의 Day 자동변경 (0) | 2019.06.12 |
| javascript, jquery 팝업 레이어 fadeIn(), fadeOut() (2) | 2019.06.10 |