<!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;}
body{
height:2000px;
}
div{
width:100%;
font-size: 80px;
text-align: center;
}
#btn{
height:100px;
background-color: lightblue;
}
#box_1{
height: 500px;
background-color: slateblue;
}
#box_2{
height: 300px;
background-color: salmon;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
/**스크롤
=>스크롤 초기 위치값은 스크롤 제일 최 상단 부분이 0
=>scrollTop값을 이용해서 위치를 변경하려면
html,body 값을 움직여야됨*/
$('#btn').click(function(){
$('html,body').animate({
scrollTop:600
});
});
/**스크롤 이벤트 기본틀
=>$(window).scroll(function(){});
=>스크롤이 움직일떄 (마우스 휠로 스크롤 위치값을 변경할 때)
스크롤 이벤트를 활용하여 움직임을 줄수 있음
=>변수=$(window).scrollTop(); 작성시 스크롤 탑 위치값을 가져올수있음*/
$(window).scroll(function(){
sct = $(window).scrollTop();
/*consol.log(sct);*/
if(sct > 0){
$('#box_2').css({
backgroundColor:'gold'
});
}else if(sct == 0){
$('#box_2').css({
backgroundColor:'salmon'
});
}
});
});//end
</script>
</head>
<body>
<div id="btn">클릭해주세요</div>
<div id="box_1">스크롤 높이값 확인</div>
<div id="box_2">그냥 박스</div>
</body>
</html>
<!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;}
ul,li{list-style: none;}
#menu_wrap{
width:100%;
height: 100px;
position: fixed;
top:0;
left: 0;
z-index: 99;
background-color: rgba(255,255,0,0.7);
}
#menu_wrap>li{
width:25%;
height: 100%;
float: left;
font:30px/100px '';
text-align: center;
}
#con_wrap>li{
position: relative;
}
.box{
width:300px;
height: 300px;
background-color: tan;
position: absolute;
top:50%;
left: 50%;
margin-top: -150px;
margin-left: -150px;
opacity: 0;
}
#box_1{
left: 80%;
}
#box_2{
top:80%;
left: 30%;
background-color: cadetblue;
}
#box_3{
top:80%;
left:60%;
background-color:midnightblue;
}
.active{
background-color: crimson;
color: #fff;
}
</style>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
var ww = $(window).width();
var wh = $(window).height();
var bg = ['pink','salmon','lightblue','slateblue']
$('#wrap, #con_wrap').css({
width:ww,
height:wh*4,
});
$('#con_wrap>li').css({
width:ww,
height:wh,
backgroundColor:function(index){
return bg[index];
},
fontSize:100,
lineHeight:wh + 'px',
textAlign:'center'
});
//event
$('#menu_wrap>li').each(function(index){
$(this).attr('data-index',index);
}).click(function(){
var i = $(this).attr('data-index');
$('html,body').animate({
scrollTop:wh*i
});
});
$(window).scroll(function(){
sct = $(window).scrollTop();
if(sct >= 0 && sct < wh){
$('#menu_wrap>li').removeClass('active');
$('#menu_wrap>li').eq(0).addClass('active');
}else if(sct >= wh && sct < wh*2){
$('#menu_wrap>li').removeClass('active');
$('#menu_wrap>li').eq(1).addClass('active');
$('#box_1').animate({
left:'50%',
opacity:1
},1500,'easeOutCirc');
/*시간, 가속도 이름*/
}else if(sct >= wh*2 && sct < wh*3){
$('#menu_wrap>li').removeClass('active');
$('#menu_wrap>li').eq(2).addClass('active');
$('#box_2').animate({
top:'50%',
opacity:1
},1500,'easeOutElastic');
$('#box_3').delay(500).animate({
top:'50%',
opacity:1
},1500,'easeOutElastic');
}else if(sct >= wh*3){
$('#menu_wrap>li').removeClass('active');
$('#menu_wrap>li').eq(3).addClass('active');
}
});
/**가속도
=>가속도 플러그인 사용(jQuery.easing)
구글에 검색('jQuery Easing Plugin(version 1.3) - GSGD')
=>가속도 들어가는 명령어 뒤에 가속도 명 붙여줌
=>가속도 형태 : 'Easing Functions Cheat Sheet' 검색*/
});//end
</script>
</head>
<body>
<div id="wrap">
<ul id="menu_wrap">
<li class="active">menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>
<ul id="con_wrap">
<li>content1</li>
<li>
<div class="box" id="box_1"></div>
</li>
<li>
<div class="box" id="box_2"></div>
<div class="box" id="box_3"></div>
</li>
<li>content4</li>
</ul>
</div>
</body>
</html>
코딩 기록 블로그