<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery MouseWheel 응용</title>
<style>
/*부드러운 스크롤 이동
html { scroll-behavior: smooth;}
*/
body{ margin:0; padding:0;}
header{ position:absolute; width:100%; height:100px; border-bottom:1px solid #000; display:flex; justify-content: center; align-items: center; float:left;}
section{ width:100%; height:100vh; display:flex; justify-content: center; align-items: center; float:left;}
footer{ width:100%; height:300px; border-top:1px solid #000; display:flex; justify-content: center; align-items: center; float:left;}
section:nth-child(odd){ background-color:#f1f1f1;}
.main1{ display:inline-block; height:1400px;}
.main4{ display:inline-block; height:800px;}
.main4 h2{ width:100%;}
#main4_sub{ width:100%; overflow:hidden; display:inline-block;}
#main4_sub[data-box='0'] .main4-box{ margin-left:0;}
#main4_sub[data-box='1'] .main4-box{ margin-left:-600px;}
#main4_sub[data-box='2'] .main4-box{ margin-left:-1200px;}
#main4_sub[data-box='3'] .main4-box{ margin-left:-1800px;}
#main4_sub[data-box='4'] .main4-box{ margin-left:-2400px;}
/*
#main4_sub[data-box='5'] .main4-box{ margin-left:-3000px;}
#main4_sub[data-box='6'] .main4-box{ margin-left:-3600px;}
*/
.main4-box{ display:flex; width:4200px; transition-duration:0.3s;}
.main4-box > div{ width:600px; display:flex; justify-content: center; align-items: center; height:600px; }
.main4-box > div:nth-child(odd){ background-color:#fff1f1;}
.main4-box > div:nth-child(even){ background-color:#f1fff1;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
// 스크롤 중복입력 방지용 flag
var scrollworker = false;
// 스크롤 구간 배열
var scrollTops = [];
// 기본 이동시간 0.8초
var basicinterval = 800;
// 페이지 로드 후 동작
$(function(){
// scrollTops 구간목록을 배열로 구성
$("section").each(function(index, element) {
if($(this).offset().top!=undefined){
scrollTops.push($(this).offset().top)
}
});
// scrollTops 내임차순 정렬
scrollTops.sort(function(a, b) { return a - b;});
// 마지막 scrollTops 을 넘겨줄 위치를 구하기 위해
scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
// header, section, footer 에서 마우스 휠을 넣었을 경우
$("header, section, footer").on("mousewheel", function (e) {
// 기존 이벤트 취소
e.preventDefault();
// 중복 입력 방지
if(scrollworker==false){
// 중복 입력 방지 on
scrollworker = true;
// 동작하고 있는 엘리먼트
const elm = $(this);
// 휠이벤트가 undefined 가 아니라면
if(event.wheelDelta!=undefined){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
}
else if (event.detail)
delta = -event.detail / 3;
// 지금의 스크롤탑 위치
const nst = $(window).scrollTop();
// 어디로 움직일 것인가
var moveTop;
if($(elm).hasClass("main1")){ // main1 스크롤 이동 패스
// 연속 입력위해 scrollworker 지정
scrollworker = false;
if(delta < 0){ // 아래로
moveTop = "+=50";
}else if(delta>0){ // 휠위로
moveTop = "-=50";
}
// main1에선 기본 스크롤
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 5,easing: "swing", complete: function () {
scrollworker = false;
}
});
return;
}else if($(elm).hasClass("main4")){ // main4 일 경우 조건 수행후 이어 동작시키기
// 조건을 수행시키기 위해 boxno 을 지정
var boxno = Number($("#main4_sub").attr("data-box"));
// 조건을 만족하는지에 대한 상태 flag
var movestat = false;
if(delta < 0){ // 아래로
boxno++;
// 조건값이 main4-box 의 수를 넘어가게 되면
if(boxno > $(".main4-box").length + 3){
boxno--;
// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
moveTop = scrollTops.filter(x=> x > nst)[0];
// 값이 없으면 마지막값으로 지정
if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
// 조건상태 만족처리
movestat = true;
}
}else if(delta>0){ // 휠위로
boxno--;
// 조건값이 최소라면
if(boxno < 0){
// 지금의 scrollTop 위치보다 작은 값 추출
var nstminArr = scrollTops.filter(x => x < nst);
// 역순정렬
nstminArr.sort(function(a, b) { return b - a;});
// 역순정렬한 첫번째값 추출
moveTop = nstminArr[0];
// 첫번째값이 undefined 면 움직일 위치 0으로 지정
if(moveTop == undefined) moveTop = 0;
movestat = true;
}
}
// 변경된 조건으로 스타일 적용
$("#main4_sub").attr("data-box",boxno);
// 조건에 따라 scrollTop을 지정하기 위해 변수지정
var intervals = basicinterval;
// 조건에 만족하지 않으면 움직임이 없도록 고정시킴
if(!movestat) { intervals=0; moveTop=$(".main4").offset().top;}
// scrollTop 이동
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: intervals,easing: "swing", complete: function () {
scrollworker = false;
}
});
}else{ // 그외일경우 일반적 진행
if(delta < 0){ // 아래로
// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
moveTop = scrollTops.filter(x=> x > nst)[0];
// 값이 없으면 마지막값으로 지정
if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
}else if(delta>0){ // 휠위로
// 지금의 scrollTop 위치보다 작은 값 추출
var nstminArr = scrollTops.filter(x => x < nst);
// 역순정렬
nstminArr.sort(function(a, b) { return b - a;});
// 역순정렬한 첫번째값 추출
moveTop = nstminArr[0];
// 첫번째값이 undefined 면 움직일 위치 0으로 지정
if(moveTop == undefined) moveTop = 0;
}
// scrollTop 이동
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: basicinterval,easing: "swing", complete: function () {
scrollworker = false;
}
});
}
}
}
});
});
$(window).resize(function(){
scrollTops = [];
$("section").each(function(index, element) {
if($(this).offset().top!=undefined){
scrollTops.push($(this).offset().top)
}
});
scrollTops.sort(function(a, b) { return a - b;});
scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
});
</script>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<section class="main0">
<h2>Main 0</h2>
</section>
<section class="main1">
<h2>Main 1</h2>
</section>
<section class="main2">
<h2>Main 2</h2>
</section>
<section class="main3">
<h2>Main 3</h2>
</section>
<section class="main4">
<div>
<h2>Main 4</h2>
<div id="main4_sub" data-box="0">
<div class="main4-box">
<div class="main4-box-1">4-1</div>
<div class="main4-box-2">4-2</div>
<div class="main4-box-3">4-3</div>
<div class="main4-box-4">4-4</div>
<div class="main4-box-5">4-5</div>
<div class="main4-box-6">4-6</div>
<div class="main4-box-7">4-7</div>
</div>
</div>
</div>
</section>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>
22. 8. 4.
Jquery 한화면 단위 Mouse Wheel 이동 (응용)
JQuery 한화면 단위 Mouse Wheel 이동를 토대로 응용해서 복합적으로...
피드 구독하기:
덧글 (Atom)