Home > Article > Web Front-end > Use JavaScript to achieve page sliding switching effect

Use JavaScript to achieve page sliding switching effect

王林Original: 2023-08-09 13:57:152000browse

In modern web page design, page sliding switching effect has become a common design requirement, which can improve user experience , increase the interactivity of the page. This article will achieve this effect through JavaScript.

First, we need to add some basic structure and styling to the HTML. Here is a simple example:

<!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>

In the CSS style, we define a class called "page", which has absolute positioning and is invisible by default. We added three page elements to the HTML and set their ids respectively.

Next, we will use JavaScript to achieve the sliding switching effect of the page. Create a file called "script.js" and include it in the HTML.

In the script file, we will use JavaScript to control the display and hiding of the page, and achieve the sliding effect by adding CSS styles.

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);
        }
    }
});

In JavaScript, we first obtain all page elements and initialize the current page as the first page. Next, we add a mouse wheel event listener to switch pages.

When scrolling down, we call the nextPage() function, which will hide the current page and display the next page. We use CSS animation effects to slide the current page up, and add a delay to ensure that the next page is displayed after the animation is completed. Finally, we remove the corresponding CSS styles after the animation is complete.

When scrolling up, we call the prevPage() function, which will hide the current page and display the previous page. Similarly, we use CSS animation effects to slide the current page down and display the previous page after the animation is completed.

Finally, we add the following style to the CSS:

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

This style will make the page element slide up 100% with an animation time of 1 second.

Through the above code examples, we successfully used JavaScript to achieve the page sliding switching effect. You can modify and expand it according to actual needs to achieve more personalized effects.

The above is the detailed content of Use JavaScript to achieve page sliding switching effect. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html JS 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Develop interactive map applications using JavaScriptNext article：Develop interactive map applications using JavaScript

See more

Use JavaScript to achieve page sliding switching effect

Related articles