JavaScript를 사용하여 페이지 슬라이딩 전환 효과 달성-JS 튜토리얼-php.cn

JavaScript를 사용하여 페이지 슬라이딩 전환 효과 달성

王林

풀어 주다： 2023-08-09 13:57:15

원래의

2143명이 탐색했습니다.

JavaScript를 사용하여 페이지 슬라이딩 전환 효과 달성

현대 웹 페이지 디자인에서 페이지 슬라이딩 전환 효과는 일반적인 디자인 요구 사항이 되었으며, 이는 사용자 경험을 개선하고 페이지 상호 작용성을 높일 수 있습니다. 이 글에서는 JavaScript를 통해 이러한 효과를 얻을 것입니다.

먼저 HTML에 몇 가지 기본 구조와 스타일을 추가해야 합니다. 다음은 간단한 예입니다.

<!DOCTYPE html>
<html>
<head>
    <title>页面滑动切换效果</title>
    <style>
        .page {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
    </style>
</head>
<body>
    <div class="page" id="page1">
        <h1>页面1</h1>
    </div>
    <div class="page" id="page2">
        <h1>页面2</h1>
    </div>
    <div class="page" id="page3">
        <h1>页面3</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

로그인 후 복사

CSS 스타일에서는 절대 위치 지정 기능이 있고 기본적으로 표시되지 않는 "페이지"라는 클래스를 정의합니다. HTML에 세 개의 페이지 요소를 추가하고 각각의 ID를 설정했습니다.

다음으로 JavaScript를 사용하여 페이지의 슬라이딩 전환 효과를 구현해 보겠습니다. "script.js"라는 파일을 생성하고 HTML에 포함시킵니다.

스크립트 파일에서는 JavaScript를 사용하여 페이지 표시 및 숨기기를 제어하고 CSS 스타일을 추가하여 슬라이딩 효과를 얻습니다.

document.addEventListener("DOMContentLoaded", function() {
    var pages = document.querySelectorAll(".page");
    var currentPage = 0;
    var isAnimating = false;

    // 初始化当前页面
    pages[currentPage].style.display = "block";

    document.addEventListener("wheel", function(event) {
        if (isAnimating) return;

        // 向下滚动
        if (event.deltaY > 0) {
            nextPage();
        }
        // 向上滚动
        else {
            prevPage();
        }
    });

    function nextPage() {
        if (currentPage < pages.length - 1) {
            isAnimating = true;

            // 当前页面向上移动
            pages[currentPage].classList.add("move-up");

            // 下一页显示
            setTimeout(function() {
                pages[currentPage].style.display = "none";
                currentPage++;
                pages[currentPage].style.display = "block";
                pages[currentPage].classList.add("move-up");

                // 动画完成后移除样式
                setTimeout(function() {
                    pages[currentPage].classList.remove("move-up");
                    isAnimating = false;
                }, 1000);
            }, 1000);
        }
    }

    function prevPage() {
        if (currentPage > 0) {
            isAnimating = true;

            // 当前页面向下移动
            pages[currentPage].classList.remove("move-up");

            // 上一页显示
            setTimeout(function() {
                pages[currentPage].style.display = "none";
                currentPage--;
                pages[currentPage].style.display = "block";
                pages[currentPage].classList.remove("move-up");
                isAnimating = false;
            }, 1000);
        }
    }
});

로그인 후 복사

JavaScript에서는 먼저 모든 페이지 요소를 가져오고 현재 페이지를 첫 번째 페이지로 초기화합니다. 다음으로, 페이지 전환을 위해 마우스 휠 이벤트 리스너를 추가합니다.

아래로 스크롤할 때 현재 페이지를 숨기고 다음 페이지를 표시하는 nextPage() 함수를 호출합니다. CSS 애니메이션 효과를 사용하여 현재 페이지를 위로 슬라이드하고 애니메이션이 완료된 후 다음 페이지가 표시되도록 지연을 추가합니다. 마지막으로 애니메이션이 완료된 후 해당 CSS 스타일을 제거합니다.

위로 스크롤할 때 prevPage() 함수를 호출하면 현재 페이지를 숨기고 이전 페이지를 표시합니다. 마찬가지로 CSS 애니메이션 효과를 사용하여 현재 페이지를 아래로 슬라이드하고 애니메이션이 완료된 후 이전 페이지를 표시합니다.

마지막으로 CSS에 다음 스타일을 추가합니다.

.move-up {
    transform: translateY(-100%);
    transition: transform 1s;
}

로그인 후 복사

이 스타일을 사용하면 1초의 애니메이션 시간으로 페이지 요소가 100% 위로 슬라이드됩니다.

위의 코드 예제를 통해 JavaScript를 사용하여 페이지 슬라이딩 전환 효과를 성공적으로 구현했습니다. 보다 개인화된 효과를 얻기 위해 실제 필요에 따라 수정하고 확장할 수 있습니다.

위 내용은 JavaScript를 사용하여 페이지 슬라이딩 전환 효과 달성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!