클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
완성된 화면
이번에 배운 패럴렉스는 메뉴를 클릭하면 해당 브라우저의
scroll의 위치로 이동을 하는 것을 배웠습니다.
HTML+CSS코드
<!-- 자바스크립트 09번 참고 -->
<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 -->코드 설명
1.nav태그인 .parallax__dot은 메뉴1 ~ 메뉴9까지 표시해주기 위해서 만들었습니다.
2..section태그에 각각의 이미지를 넣어 둡니다.
3.section태그의 이미지에 넣어줄 text를 span, h2, p태그로 만들었습니다.
4.aside태그는 scroll의 현재 위치를 표시하기 위해 만들었습니다.
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){
// ????? ?????? ????? ???????
console.log("scrollTop: " +scrollTop);
console.log("item:" + 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.이 코드는 스크롤 이벤트와 클릭 이벤트를 처리하여 페이지 내에서 특정 요소로 부드럽게 스크롤하는 효과를 구현하는 기능입니다.
2.첫 번째 부분은 .parallax__dot li a 선택자에 해당하는 모든 요소에 대해 반복문을 실행합니다. 각 요소에 클릭 이벤트를 추가하고, 클릭 이벤트 콜백 함수 내에서 다음 작업을 수행합니다:
3.이벤트의 기본 동작을 취소합니다(e.preventDefault()).
클릭된 요소의 href 속성 값을 가져와 해당 요소로 스크롤하는 효과를 부드럽게 적용합니다. 이를 위해 querySelector 메서드를 사용하여 해당 요소를 선택하고, scrollIntoView 메서드를 호출합니다. behavior: "smooth" 옵션을 사용하여 부드러운 스크롤 효과를 적용합니다.
4.두 번째 부분은 window 객체의 스크롤 이벤트를 처리합니다. 스크롤이 발생할 때마다 다음 작업을 수행합니다:
5.현재 스크롤 위치를 가져와 scrollTop 변수에 할당합니다. 이를 위해 window.pageYOffset 또는 window.scrollY를 사용합니다.
6..parallax__info span 요소의 내용을 현재 스크롤 위치로 업데이트합니다.
7..parallax__item 선택자에 해당하는 모든 요소에 대해 반복문을 실행합니다. 각 요소의 offsetTop 값을 비교하여 현재 스크롤 위치보다 작은 요소들을 식별합니다.
8.이 부분은 페이지의 특정 영역에 도달하면 해당 영역을 표시하기 위한 동작을 구현하는 것으로 보입니다.
9.현재 스크롤 위치가 각 요소의 offsetTop보다 큰 경우, .parallax__dot li 요소의 클래스에서 "active"를 제거합니다.
10.현재 스크롤 위치가 해당 요소의 offsetTop보다 작은 경우, .parallax__dot li:nth-child(num+1) 요소에 "active" 클래스를 추가합니다.
11.여기서 num은 반복문 인덱스입니다.
따라서, 이 코드는 페이지 내에서 클릭된 링크를 부드럽게 스크롤하고, 스크롤 위치에 따라 특정 요소를 감지하여 해당 요소를 표시하기 위한 기능을 구현합니다.
연속 4일 가까이 학원을 쉬니간
학원을 가기가 싫네요.
너무 길게 쉬는 것도 오히려 독이네요