워드프레스나 티스토리 등 웹사이트 디자인의 현대적인 흐름을 따라가기 위해서는 최신 트렌드와 기술을 주시하고 적용하고 있으며 최근에는 다양한 웹사이트에서 스크롤과 휠 이벤트를 활용한 동적 기능들을 많이 볼 수 있습니다. 이런 기능들은 사용자 경험을 더욱 흥미롭게 만들어주며, 웹사이트 제작 시에 고려해보면 좋습니다.
휠을 이용한 웹사이트 내비게이션은 사용자들에게 시선을 끄는데 효과적입니다. 예를 들어, 스크롤을 내리면 화면이 옆으로 이동하거나 섹션들이 한 칸씩 변하는 등의 동작을 구현할 수 있습니다. 이렇게 동적인 효과를 웹사이트에 추가하면 사용자가 사이트를 더 즐겁게 탐색할 수 있습니다.
웹사이트에서 가로 스크롤링 기능을 구현하기 위해서는 jQuery를 활용하여 휠 이벤트를 처리하는 방법으로서 먼저, 아래에 간단한 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 부분에서는 각 섹션을 구분하기 위해 border 속성을 사용하여 시각적으로 구분을 만들어줍니다.
<style>
body { margin: 0;}
.container {
/* transition: all 0.5s; */
}
.box {
height: 100vh;
font-size: 100px;
line-height: 100vh;
text-align: center;
border: 10px solid;
box-sizing: border-box;
}
</style>
이어서 jQuery를 사용하여 가로 스크롤링을 구현할 수 있으며 이때 아래는 간단한 알고리즘 코드를 참고하세요.
container와box의 가로 및 세로 값 설정.- 스크롤 시 화면에 보이는 부분을 제외한 값 계산 (스크롤 리미트).
- 휠 방향 감지 함수를 이용하여 스크롤 이동 방향을 파악.
- 휠을 내릴 때와 올릴 때에 따라
container를 이동시킴. - 첫 번째와 마지막 섹션일 때의 예외 처리 (prev()와 next()의 개수가 0인 경우).
- 브라우저 크기 조정에 대한 대비를 위한 resize 함수 실행.
이렇게 구현하면 사용자가 웹사이트를 탐색하는 과정에서 가로 스크롤을 통해 섹션들을 동적으로 이동할 수 있게 됩니다.
참고 : 마우스 스크롤 시 가로 이동 시 세로 복구 – 윈도우11 업데이트 실패