JavaScriptを使用してページのスライド切り替え効果を実現します-jsチュートリアル-php.cn

JavaScriptを使用してページのスライド切り替え効果を実現します

王林

リリース： 2023-08-09 13:57:15

オリジナル

2112 人が閲覧しました

JavaScriptを使用してページのスライド切り替え効果を実現します

JavaScript を使用してページスライド切り替え効果を実現する

現代の Web ページデザインでは、ページスライド切り替え効果が一般的なデザイン要件となっており、ユーザーエクスペリエンスを向上させ、ユーザーエクスペリエンスを向上させることができます。ページのインタラクティブ性。この記事では、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 スタイルでは、絶対位置指定があり、デフォルトでは非表示になる「page」というクラスを定義します。 HTML に 3 つのページ要素を追加し、それぞれの 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 中国語 Web サイトの他の関連記事を参照してください。