=== Prologue ===
웹사이트를 하나씩 만들어보게 되면서
이전에는 아무생각없이 보던 사이트들이 요즘에는 어떤 기능들을 사용하였을까 생각하면서 하나하나 꼼꼼히 보게 되는것 같다.
요즘 '트렌디' 하다고 하는 사이트를 들어가 보면 휠 적용 or 스크롤을 사용하는 기능들을 사용해서 사이트를 구성하는 경우가 많이 보인다. 휠을 내릴때마다 화면이 옆으로 이동한다던지, 스크롤을 내릴때 마다 섹션 전체가 한칸씩 변한다던지 등등 움직임이 많으니 일단 시선이 확 끌리고 무엇보다 사이트 구경하기가 재미있어 웹사이트를 구상할때 기능을 넣어보는 것도 좋지 않을까 싶다.
==== Mission ====
==== detail progress ====
아래 방법은
마우스휠을 한칸 내릴때 마다 섹션 전체가 가로로 이동하는 방법이다.
비율적인 부분을 이해만 하면 가로스크롤 부분은 꽤 간단하다.
✨아래는 간단한 html 구조
<body>
<div class="container">
<div class="box">box0</div>
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</body>
✨ css부분
<style>
body { margin: 0;}
.container {
/* transition: all 0.5s; */
}
.box {
/* 아래 두줄은 제이쿼리 부분에서 box에 css 주는거 없을때 필요 */
/* float: left;
width: calc(100% / 4); */
height: 100vh;
font-size: 100px;
line-height: 100vh;
text-align: center;
border: 10px solid;
box-sizing: border-box;
}
</style>-> border는 section구분을 명확하게 하기 위해서 10px을 강하게 주었다.
✨ jquery 영역 (과정 생각해보기) 코드를 짜기 전에 간단하게 알고리즘을 생각해보면 도움이 많이 된다.
1. box와 box를 감싸고 있는 container의 가로세로값을 각각 지정해준다.
2. 스크롤을 내릴 시, 화면에 (보이는창) 나타는 값은 제외해줘야 한다. (스크롤의 리미트)
3. 휠을 한번 내릴때 (휠의 방향을 감지 함수) 그 값 만큼, box를 감싸고 있는 container가 - 방향으로 움직인다.
4. 휠을 한번 올릴때 (휠의 방향을 감지 함수) 그 값 만큼, box를 감싸고 있는 container가 + 방향으로 움직인다.
5. sec이 처음일때와 마지막일 때를 고려한다. (현재 sec의 방번호 prev()와 next() 의 개수가 0보다 작으면 sec이 없다는 뜻)
6. 브라우저 사이즈를 조정했을 경우를 대비해 resize 함수 실행
<script>
$(document).ready(function(){
let d_width = 0; // 브라우저 가로
let d_height = 0; // 문서 전체의 높이
function tmp() {
// container의 가로사이즈(화면가로 * box 개수)
let con_width = $(window).outerWidth() * $('.box').length;
$('.container').css({
width: con_width,
height: '100vh',
position: 'fixed',
top: 0,
left: 0
});
// css에서 해도 상관없다.
$('.box').css({
width: con_width / $('.box').length,
height: '100vh',
float: 'left'
});
// box들을 위로 끌어올렸기 때문에 body의 높이는 100vh나 마찬가지인 상태.
// 그래서 억지로 전체 box들의 세로크기 만큼 body에 줘야한다.(스크롤 내리기위함)
// 이때 높이는 가로영역의 비율과 동일하게 준다. (이후 리미트를 주게 됨으로써 비율의 값이 정해진다.)
$('body').css({
height: '100vh'
});
let w_width = $(window).width(); // 화면의 가로값
let w_height = $(window).height() // 화면의 세로값
// 스크롤 될때의 리미트
d_width = con_width - w_width; // 전체 가로값 - 현재 화면의 가로값
d_height = $('body').height() - w_height // 전체 세로값 - 현재 화면의 세로값
}
tmp();
let array = [];
for(let i=0; i<$('.box').length; i++) {
array[i] = $('.box').eq(i).offset().left
}
let chk = true;
$('.box').on('mousewheel DOMMouseScroll', function(){
if(chk) {
// 휠 일정시간동안 막기
chk = false;
setTimeout(function(){
chk = true;
}, 500)
// 휠 방향 감지(아래: -120, 위: 120)
let w_delta = event.wheelDelta / 120;
// 휠 아래로
if(w_delta < 0 && $(this).next().length > 0) {
$('.container').animate({
left: -array[$(this).index()+1]
}, 500)
}
// 휠 위로
else if(w_delta > 0 && $(this).prev().length > 0) {
$('.container').animate({
left: -array[$(this).index()-1]
}, 500)
}
}
});
//브라우저를 resize했을시를 대비해 박스의 크기는 다시 구해준다.
$(window).resize(function(){
for(let i=0; i<$('.box').length; i++) {
array[i] = $('.box').eq(i).offset().left
}
tmp();
})
});
</script>
'FRONTEND > JS & Library 실무' 카테고리의 다른 글
| [JS] 배열로 저장된 데이터 활용하여 드래그 슬라이드를 이용한 막대차트 만들기 (0) | 2022.02.28 |
|---|---|
| [waypoint.js] 웨이포인트 스크롤 애니메이션 (스크롤 값 측정 해주는 라이브러리) (0) | 2022.02.24 |
| [slick.js] slick 라이브러리 활용 슬라이드와 프로그래스 바 (0) | 2022.02.23 |
| [제이쿼리] 03. 마우스휠 내릴때 100% 전체화면 나타내기 (feat. fullpage.js 라이브러리 사용법) (0) | 2021.11.03 |
| [제이쿼리] 02. 메뉴 hover 시 메뉴 100% 판 내려오기 (1) | 2021.06.24 |
