끄적끄적: 8월 2022

JQuery 한화면 단위 Mouse Wheel 이동를 토대로 응용해서 복합적으로...
<!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 이동 (응용)

프로필

태그

블로그 보관함
