웹사이트 마우스 스크롤 세로에서 가로 이동 - HTML CSS

노랗 2023. 10. 23.

웹사이트를 만들면서 요즘 트렌디한 사이트들을 관찰하면 어떤 기능들이 사용되는지 살펴보는 것은 정말 흥미로운 일입니다. 이런 사이트들은 휠 스크롤 및 다양한 스크롤 기능을 활용하여 사용자 경험을 향상시키고 있습니다. 웹사이트를 구상하고 디자인할 때 이러한 기능을 적용해보는 것은 창의적인 아이디어를 발전시키는 데 큰 도움이 될 것입니다.

요즘 가장 핫한 웹사이트 트렌드 중 하나는 마우스 스크롤 시 가로 스크롤링 기능을 활용한 사이트로서 티스토리 블로그나 워드프레스 등 웹사이트 블로그를 구상해볼 수 있으며 이러한 웹사이트의 가로 방향으로 스크롤하면서 콘텐츠를 탐색하는 것이 가능합니다.

먼저, 마우스 스크롤 시가로스크롤링을 구현하기 위해 필요한 기본 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] - 마우스 휠 스크롤 안될 때 오류 해결방법

저작자표시 비영리 변경금지

'IT 리뷰 > 블로그 SEO' 카테고리의 다른 글

워드프레스 WP-ADMIN 로그인 관리자접속 오류 해결방법 (0)	2023.10.26
티스토리 개인도메인 보안 인증서 만료예정일 자동갱신 실패 (0)	2023.10.12
티스토리 2차도메인 등록 및 카페24 개인 도메인 - A레코드 DNS 설정 (0)	2023.10.11