클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
최종 완성된 모습
패럴렉스 2단계는 닷버튼을 클릭하면 애니메이션 효과를 부여합니다.
브라우저에서 scroll을 하면 scroll값을 갖고와서 그 값으로 애니메이션을 부여합니다.
HTML코드
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Parallax Effect01</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__dot">
<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>
<!-- //parallax__dot -->
<main id="main">
<div id="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">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>
<!-- //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 -->
<footer id="footer">
<a href="mailto:skadldldl123@gmail.com">mailto:skadldldl123@gmail.com</a>
</footer>
<!-- //footer -->
</body>코드설명
1.nav태그인 .parallax__nav는 상단에 나타나는 메뉴1~메뉴9입니다.
2.div태그인 #parallax__wrap은 배너쪽에 있는 숫자(1~9) -> 글(section1~9) -> 이미지 -> 글(명언) 입니다.
2-2. span태그인 .parallax__item__num은 숫자(1~9) 까지를 나타냅니다.
2-3. h2태그인 .parallax__item_title은 글(section1~9)까지를 나타냅니다.
2-4. div태그인 .parallax__item__img은 이미지를 나타냅니다.
2-5. p태그인 .parallax__item__desc은 글(명언)을 나타냅니다.
3. aside태그인 .parallax__info은 마우스 좌표값을 나타냅니다.
JAVASCRIPT코드
<script>
document.querySelectorAll(".parallax__dot li a").forEach(dot => {
// console.log(dot);
dot.addEventListener("click", e => {
e.preventDefault();
// 요소 메서드 : element.scrollIntoView() : 세로 이동이 가능하고 + 설정
document.querySelector(dot.getAttribute("href")).scrollIntoView({behavior: "smooth"});
// console.log(dot.getAttribute("href"));
});
});
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelector(".parallax__info span").innerText = parseInt(scrollTop);
document.querySelectorAll(".parallax__item").forEach((item, num) => {
if(scrollTop > item.offsetTop){
document.querySelectorAll(".parallax__dot li").forEach(li => {
li.classList.remove("active");
});
document.querySelector(".parallax__dot li:nth-child("+(num+1)+")").classList.add("active");
}
});
});
</script>코드설명
1. document.querySelectAll()로 태그, 아이디, 클래스를 전부다 가져옵니다.
2. dot.addEventListener("click")으로 닷버튼을 클릭했다면 실행이 됩니다.
3. window.addEventListener("scroll")으로 브라우저 화면을 스크롤하면 코드가 실행이 됩니다.
4. let scrollTop에는 브라우저 스크롤한 좌표값을 저장합니다.
5. docuemnt.querySelectorAll()로 클래스, 아이디, 태그를 forEach문으로 전부다 가져옵니다.
6. docuemnt.querySelectorAll()로 클래스, 아이디, 태그를 가져오고 classList.remove로 active클래스를 지웁니다.
7. classList.add()로 active클래스를 추가합니다.