Home >Web Front-end >JS Tutorial >Use JavaScript to achieve page sliding switching effect
Use JavaScript to achieve page sliding switching effect
- 王林Original
- 2023-08-09 13:57:152115browse
Use JavaScript to achieve page sliding switching effect
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!