<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8"/>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script src="./jquery.mousewheel.min.js"></script>
<title>Document</title>
<style>
*{margin:0;padding:0;}
#wrap{width:500%;position:absolute;height:100%}
section{
width:20%;
height:100%;
float:left;
text-align:center;
position:relative;
}
span{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}
#home{background-color:#FFD9FA}
#about{background-color:#E8D9FF}
#skill{background-color:#DAD9FF}
#work{background-color:#D4F4FA}
#contact{background-color:#CEFBC9}
</style>
<script>
$(function(){
$("section").mousewheel(function(event, d){
if(d>0){
var off = $(this).prev("section").offset().left;
}else if(d<0){
var off = $(this).next("section").offset().left;
}
$("html, body").stop().animate({
"scrollLeft":off
},1300);
});
});
</script>
</head>
<body>
<div id="wrap">
<section id="home"><span>home</span></section>
<section id="about"><span>about</span></section>
<section id="skill"><span>skill</span></section>
<section id="work"><span>work</span></section>
<section id="contact"><span>contact</span></section></div>
</body>
</html>
jquery.mousewheel.min.js'공부하는 징뉴 > 퍼블' 카테고리의 다른 글
| 20190213_수업내용 (0) | 2019.02.13 |
|---|---|
| 마우스휠 좌우로 굴리기 (0) | 2019.02.13 |
| 삼번 복습해야댐 (0) | 2019.01.23 |
| 오늘까지한고~ (0) | 2019.01.23 |
| nav (0) | 2019.01.21 |