무조건 한 방향으로만 이동할 수 있는 페이지
스크롤이 아닌 클릭이벤트로 페이지를 이동
body
- 전체 wrap로 감싸주고 부모 div 4개 생성
- 각div 안에 con 자식 하나씩 추가
css
- 부모 div에 위치한 상대값 지정
- 자식 con에 위치한 절대값, 위쪽, 오른쪽 50%지정
script
-
윈도우 가로,세로값 변수로 받아오기
-
전체 wrap 가로 윈도우값, 세로 윈도우 높이 4배값 지정
-
index값으로 색상 변수로 지정(빨,초,파,노)
-
부모div에 가로,세로 윈도우값지정
-
배경색index값으로 순서대로 지정
-
con자식에게 가로,세로 80%비율값(0.8)지정
-
배경색 회색
-
박스 가운데 정렬
-
wrap에 위치값 고정
-
con안에 h1태그 박스만들기(크기 윈도우 가로값 0.1)
-
박스 안에 각 화살표 만듬, 마지막엔 메인 글자 넣기, 글자위아래 가운데 정렬
-
화살표 클릭시 아랫쪽 부모div 페이지 애니메이트 이동
-
마지막 메인 글자 클릭시 첫번째 메인으로 애니메이트 이동
전체코드
<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
*{margin: 0; padding: 0;}
#wrap{
position: fixed;
top:0;
left: 0;
}
section{
position: relative;
}
.con,.btn{
position: absolute;
top:50%;
left: 50%;
}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
var ww = $(window).width();
var wh = $(window).height();
var bg = ['pink','lightblue','lightcoral','lightgreen'];
$('#wrap').css({
width:ww,height:wh*4,backgroundColor:'lightgray'
});
$('section').css({
width:ww,height:wh,backgroundColor:function(index){
return bg[index];
}
});
$('.con').css({
width:ww*0.8,height:wh*0.8,backgroundColor:'gray',
marginTop:-(wh*0.8)/2, marginLeft:-(ww*0.8)/2
});
$('.btn').css({
width:ww*0.1,height:ww*0.1,backgroundColor:'#fff',
marginTop:-(ww*0.1)/2, marginLeft:-(ww*0.1)/2,
fontSize:50, textAlign:'center',lineHeight:ww*0.1+'px'
});
/*$('#btn_1').click(function(){
$('#wrap').animate({
top:-wh
},1000);
});
$('#btn_2').click(function(){
$('#wrap').animate({
top:-wh*2
},1000);
});
$('#btn_3').click(function(){
$('#wrap').animate({
top:-wh*3
},1000);
});
$('#btn_4').click(function(){
$('#wrap').animate({
top:0
},1000);
});*/
function wrapMove(elem,tMove){
$(elem).click(function(){
$('#wrap').animate({
top:tMove
},1000);
});
}
wrapMove('#btn_1',-wh);
wrapMove('#btn_2',-wh*2);
wrapMove('#btn_3',-wh*3);
wrapMove('#btn_4',0);
});
</script>
</head>
<body>
<div id="wrap">
<section>
<div class="con">
<h1 class="btn" id="btn_1">▼</h1>
</div>
</section>
<section>
<div class="con">
<h1 class="btn" id="btn_2">▼</h1>
</div>
</section>
<section>
<div class="con">
<h1 class="btn" id="btn_3">▼</h1>
</div>
</section>
<section>
<div class="con">
<h1 class="btn" id="btn_4">main</h1>
</div>
</section>
</div>
</body>
</html>
코딩 기록 블로그