JavaScript를 사용하여 페이지 슬라이딩 전환 효과 달성
- 王林원래의
- 2023-08-09 13:57:152000검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!