웹사이트를 만들면서 요즘 트렌디한 사이트들을 관찰하면 어떤 기능들이 사용되는지 살펴보는 것은 정말 흥미로운 일입니다. 이런 사이트들은 휠 스크롤 및 다양한 스크롤 기능을 활용하여 사용자 경험을 향상시키고 있습니다. 웹사이트를 구상하고 디자인할 때 이러한 기능을 적용해보는 것은 창의적인 아이디어를 발전시키는 데 큰 도움이 될 것입니다.
요즘 가장 핫한 웹사이트 트렌드 중 하나는 마우스 스크롤 시 가로 스크롤링 기능을 활용한 사이트로서 티스토리 블로그나 워드프레스 등 웹사이트 블로그를 구상해볼 수 있으며 이러한 웹사이트의 가로 방향으로 스크롤하면서 콘텐츠를 탐색하는 것이 가능합니다.
먼저, 마우스 스크롤 시가로스크롤링을 구현하기 위해 필요한 기본 HTML 구조를 살펴보겠습니다. 아래는 간단한 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>이 코드에서 .container는 가로로 스크롤되는 박스들을 감싸고 있습니다. 각각의 .box는 가로 스크롤의 한 섹션을 나타냅니다.
다음은 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>여기서는 .box의 스타일을 정의하고, 섹션 간의 경계를 명확히 하기 위해 border를 사용하였습니다.
이제 jQuery를 사용하여 실제로 가로스크롤링을 구현하는 부분을 살펴보겠습니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
var container = $(".container");
var boxes = $(".box");
var currentIndex = 0;
// 휠 스크롤 이벤트 처리
$(window).on("wheel", function(event) {
event.preventDefault();
var delta = event.originalEvent.deltaY;
if (delta > 0 && currentIndex < boxes.length - 1) {
currentIndex++;
} else if (delta < 0 && currentIndex > 0) {
currentIndex--;
}
var scrollTo = currentIndex * $(window).width();
container.animate({ scrollLeft: scrollTo }, 500);
});
// 브라우저 리사이즈 처리
$(window).on("resize", function() {
var scrollTo = currentIndex * $(window).width();
container.scrollLeft(scrollTo);
});
});
</script>위의 JavaScript 코드는 다음과 같은 주요 기능을 수행합니다.
휠 스크롤 이벤트를 감지하고 사용자가 휠을 아래로 돌리면 다음 섹션으로 이동하고, 위로 돌리면 이전 섹션으로 이동할 수 잇으며 현재 섹션의 인덱스를 추적하고, 이에 따라 스크롤 위치를 조정합니다.
그리고 인터넷 브라우저 크기를 조정할 때, 현재 섹션을 유지하기 위해 리사이즈 이벤트를 처리하며 이러한 코드를 사용하면 웹사이트에 가로스크롤링 기능을 추가할 수 있습니다.
참고 : [IT 리뷰/윈도우 Tip] - 마우스 휠 스크롤 안될 때 오류 해결방법
