ホームページ > 記事 > ウェブフロントエンド > JavaScriptを使用してページのスライド切り替え効果を実現します
JavaScriptを使用してページのスライド切り替え効果を実現します
- 王林オリジナル
- 2023-08-09 13:57:152000ブラウズ
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 サイトの他の関連記事を参照してください。