클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
최종 완성된 모습
이번에는 포트폴리오 준비도 할겸.
사이트를 만들때 효과를 더 주기 위해서
패럴렉스 고정된 방식을 배웠습니다.
HTML코드+CSS코드
<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__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>
<!-- //parallax__nav -->
<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>
<div class="info">
<ul>
<li>#section1 offset() : <span class="offset1">0</span>px</li>
<li>#section2 offset() : <span class="offset2">0</span>px</li>
<li>#section3 offset() : <span class="offset3">0</span>px</li>
<li>#section4 offset() : <span class="offset4">0</span>px</li>
<li>#section5 offset() : <span class="offset5">0</span>px</li>
<li>#section6 offset() : <span class="offset6">0</span>px</li>
<li>#section7 offset() : <span class="offset7">0</span>px</li>
<li>#section8 offset() : <span class="offset8">0</span>px</li>
<li>#section9 offset() : <span class="offset9">0</span>px</li>
</ul>
</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>
const Scroll = document.querySelector(".scroll span");
window.addEventListener("scroll", () => {
// 세가지 다 똑같음. 현재는 windwo.pageYoffset을 많이 씀
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
// 정수로 출력해서 소수점을 제외시킴
Scroll.innerText = parseInt(scrollTop);
document.querySelectorAll(".parallax__item").forEach((item, index) => {
if(scrollTop >= item.offsetTop - 2){
document.querySelectorAll(".parallax__nav li").forEach((li) => {
li.classList.remove("active");
});
document.querySelector(".parallax__nav li:nth-child("+(index+1)+")").classList.add("active");
}
});
document.querySelectorAll(".parallax__nav li a").forEach(li => {
li.addEventListener("click",(e) => {
// preventDefault() : 클릭 못하게 막음
e.preventDefault();
// section1
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth"
});
});
});
});1.
const Scroll = document.querySelector(".scroll span");querySelector()로 span태그를 찾아냅니다.
2.
window.addEventListener("scroll", () => {
코드
}웹페이지의 스크롤을 스크롤하면 실행됩니다.
