끄적끄적: 8월 2022

JQuery 한화면 단위 Mouse Wheel 이동를 토대로 응용해서 복합적으로...
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!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 이동 (응용)

프로필

태그

블로그 보관함
