728x90
오늘은 숨김메뉴와 탑 버튼을 나타내는 패럴럭스 이펙트를 하였습니다.
스크롤을 내리면 메뉴가 사라지고 올리면 메뉴가 나옵니다.
그리고 맨 밑으로 내리면 탑 버튼이 나옵니다.
추가된 css
.parallax__nav {
top: -100px;
transition: all 0.6s;
}
.parallax__nav.show {
top: 10px;
}HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페럴렉스 이펙트03</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/parallax.css">
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>JavaScript Parallax Effect03</h1>
<p>페럴렉스 이펙트 : 숨김메뉴/ 탑 버튼</p>
<ul>
<li class="active"><a href="parallaxEffect01.html">1</a></li>
<li><a href="parallaxEffect02.html">2</a></li>
<li><a href="parallaxEffect03.html">3</a></li>
<li><a href="parallaxEffect04.html">4</a></li>
<li><a href="parallaxEffect05.html">5</a></li>
<li><a href="parallaxEffect06.html">6</a></li>
<li><a href="parallaxEffect07.html">7</a></li>
</ul>
</header>
<!-- //header-->
<nav class="parallax__nav">
<ul>
<li class="active"><a href="#section1">메뉴1</a></li>
<li><a href="#section2">메뉴2</a></li>
<li><a href="#section3">메뉴3</a></li>
<li><a href="#section4">메뉴4</a></li>
<li><a href="#section5">메뉴5</a></li>
<li><a href="#section6">메뉴6</a></li>
<li><a href="#section7">메뉴7</a></li>
<li><a href="#section8">메뉴8</a></li>
<li><a href="#section9">메뉴9</a></li>
</ul>
</nav>
<main id="main">
<div class="parallax__wrap">
<section id="section1" class="parallax__item">
<span class="parallax__item__num">01</span>
<h2 class="parallax__item__title">section1</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다.</p>
</section>
<!-- //section1 -->
<section id="section2" class="parallax__item">
<span class="parallax__item__num">02</span>
<h2 class="parallax__item__title">section2</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까지 포기하지 않은 것이다.</p>
</section>
<!-- //section2 -->
<section id="section3" class="parallax__item">
<span class="parallax__item__num">03</span>
<h2 class="parallax__item__title">section3</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">자신의 꿈을 이루기 위해 끊임없이 노력하면 언젠가는 반드시 성공할 것이다.</p>
</section>
<!-- //section3 -->
<section id="section4" class="parallax__item">
<span class="parallax__item__num">04</span>
<h2 class="parallax__item__title">section4</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">성공을 위해서는 대담하게 도전해야 합니다. 그리고 실패에 대해서는 당당하게 인정해야 합니다.</p>
</section>
<!-- //section4 -->
<section id="section5" class="parallax__item">
<span class="parallax__item__num">05</span>
<h2 class="parallax__item__title">section5</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">가장 어두운 밤이 지나면 해는 떠오른다.</p>
</section>
<!-- //section5 -->
<section id="section6" class="parallax__item">
<span class="parallax__item__num">06</span>
<h2 class="parallax__item__title">section6</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">성공의 비밀은 한 가지 비밀이 아니다. 그것은 단순한 노력, 인내와 굳은 의지의 결합이다.</p>
</section>
<!-- //section6 -->
<section id="section7" class="parallax__item">
<span class="parallax__item__num">07</span>
<h2 class="parallax__item__title">section7</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">당신이 세상을 바꾸려면 먼저 스스로 바뀌어야 합니다.</p>
</section>
<!-- //section7 -->
<section id="section8" class="parallax__item">
<span class="parallax__item__num">08</span>
<h2 class="parallax__item__title">section8</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">성공하기 위해서는 먼저 불가능하다고 생각했던 일을 가능하게 만들어야 합니다.</p>
</section>
<!-- //section8 -->
<section id="section9" class="parallax__item">
<span class="parallax__item__num">09</span>
<h2 class="parallax__item__title">section9</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">당신이 바라는 것을 이루기 위해 필요한 것은 당신이 가진 것을 최대한 활용하는 것입니다.</p>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //main -->
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- //parallax__info -->
<div class="parallax__top">
<a href="#header">TOP</a>
</div>
<!-- // parallax__top -->
<footer id="footer">
<a href="mailto:1346zany@gmail.com">1346zany@gmail.com</a>
</footer>
<!-- //footer -->
</body>
</html>
script
<script>
// 01 메뉴
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY;
if(scrollTop > document.body.scrollHeight - 1000){
document.querySelector(".parallax__top").classList.add("show");
} else {
document.querySelector(".parallax__top").classList.remove("show");
}
});
//탑 버튼 애니메이션
document.querySelector(".parallax__top").addEventListener("click", (e) => {
e.preventDefault();
window.scrollTo({
top:0,
behavior:"smooth"
})
});
//03 메뉴
let nowScroll = true;
let lastScroll = 0;
function scrollProgress (){
nowScroll=true;
setInterval(() => {
if(nowScroll){
nowScroll = false;
hasScroll();
}
}, 300)
}
function hasScroll (){
let scrollTop = window.pageXOffset || window.scrollY;
if(scrollTop < lastScroll){
document.querySelector(".parallax__nav").classList.add("show");
} else {
document.querySelector(".parallax__nav").classList.remove("show")
}
lastScroll = scrollTop;
}
window.addEventListener("scroll", scrollProgress)
</script>"scroll" 이벤트에 대한 window 객체의 이벤트 리스너를 추가합니다.
스크롤 이벤트 콜백 함수 내부에서 scrollTop 변수에 수직 스크롤 위치 값이 할당됩니다. 다른 속성(pageYOffset 및 scrollY)을 사용하여 다른 브라우저에서도 호환성을 확보합니다.
주석 처리된 코드 블록은 스크롤 위치가 0보다 큰지 확인하고 .parallax__nav 요소에 show 클래스를 추가하거나 제거합니다.
scrollTop 값이 문서의 높이(document.body.scrollHeight)에서 1000을 뺀 값보다 큰 경우, .parallax__top 요소에 show 클래스를 추가합니다. 그렇지 않으면 show 클래스를 제거합니다. 이것은 "탑 버튼"을 처리하는 부분입니다.
.parallax__top 요소에 대한 클릭 이벤트 리스너를 추가합니다. 클릭 이벤트 발생 시, 이벤트의 기본 동작을 중단하고 (e.preventDefault()) 스크롤을 맨 위로 부드럽게 이동시킵니다.
nowScroll과 lastScroll 변수는 스크롤 진행 여부를 추적하고, 스크롤 진행 여부에 따라 hasScroll() 함수를 실행합니다.
scrollProgress() 함수는 nowScroll 변수를 true로 설정하고, 300ms마다 nowScroll을 확인하여 hasScroll() 함수를 호출합니다.
hasScroll() 함수는 scrollTop 값을 가져와 이전 스크롤 위치(lastScroll)와 비교합니다. 이전 스크롤 위치보다 작은 경우 .parallax__nav 요소에 show 클래스를 추가하고, 그렇지 않으면 show 클래스를 제거합니다.
window 객체에 대한 스크롤 이벤트에 scrollProgress() 함수를 추가합니다