<!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 s = $(window).scrollLeft();
s-=150; //이게 스크롤 올린거
}else if(d<0){ //이게 스크롤 내린거
var s = $(window).scrollLeft();
s+=150;
}
$("html, body").stop().animate({
"scrollLeft":s
},10);
});
});
</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>
얘도 마우스휠 js 같은폴더에잇어야댐
'공부하는 징뉴 > 퍼블' 카테고리의 다른 글
| https://html5up.net/ (0) | 2019.02.22 |
|---|---|
| 20190213_수업내용 (0) | 2019.02.13 |
| 패럴렉스 스크롤 좌우로 넘기기 (0) | 2019.02.13 |
| 삼번 복습해야댐 (0) | 2019.01.23 |
| 오늘까지한고~ (0) | 2019.01.23 |