“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
자바스크립트 패럴랙스 이펙트 02_사이드메뉴
💜 parallax Effect02
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>패럴럭스 이펙트 02</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/parallax.css">
</head>
<body class="img01 bg01 font07">
<header id="header">
<h1>Javascript Parallax Effect02</h1>
<p>패럴럭스 이펙트 : 사이드 메뉴</p>
<ul>
<li><a href="parallaxEffect01.html">1</a></li>
<li class="active"><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__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>ps</div>
</aside>
<!-- parallax__info -->
<footer id="footer">
<a href="mailto:hunmi961119@gmail.com">hunmi961119@gmail.com</a>
</footer>
<!-- //footer -->reset.css와 parallax.css는 link stylesheet로 연결해줬습니다.
사이드에 들어갈 parallax_dot을 만들어줬습니다.
섹션별로 나누어 움직이게 작업해줄겁니다.
script
document.querySelectorAll(".parallax__dot li a").forEach(dot => {
// console.log(dot);
dot.addEventListener("click", e => {
e.preventDefault();
// console.log(document.querySelector(dot.getAttribute("href")))
// console.log(dot.getAttribute("href"))
document.querySelector(dot.getAttribute("href")).scrollIntoView({behavior: "smooth"});
})
});document.querySelectorAll()함수를 사용해 HTML 문서에서 parllax__dot li a 셀렉터에 해당하는 모든 요소를 선택합니다. 이 쇼로들은 일반적으로 웹 페이지에서 다양한 섹션 간 탐색을 위한 점진적 스크롤 기능을 가진 Parallax디자인을 사용할 때 사용됩니다.
forEach()메서드를 사용해 선택된 모든 요소에 대해 반복 작업을 수행합니다.
반복 작업의 목적은 요소가 클릭되었을 때 실행될 이벤트 리스너를 등록하는 것입니다.
이벤트 리스너는 addEventListener()함수를 사용해 등록되며, 클릭 이벤트가 발생하면 콜백 함수가 실행됩니다.
이 콜백함수는 preventDefault() 메서드를 사용해 기본 이벤트 동작을 막습니다.
이 기본 동작은 링크를 클릭하면 해당 링크로 이동하는 것입니다.
그 다음, querySelector() 메서드를 사용해 클릭된 요소의 href 속성값을 가져와 해당 값으로 선택한 요소를 스크롤합니다.
scrollIntoView()메서드를 사용해 선택한 요소로 스크롤해 behavior : "smooth" 옵션을 통해 스크롤 애니메이션을 부드럽게 만듭니다.
✨ preventDefault() 메서드
javascript 의 이벤트 객체에 있는 메서드 중 하나로,
이벤트가 기본 동작을 수행하지 않도록 막아줍니다.
웹 페이지에서 하이퍼링크를 클릭하면 해당 링크의 주소로 이동하는 것이 기본 동작인데
이 메서드를 사용하면 기본 동작을 막을 수 있습니다.
이를 통해 자바스크립트 코드에서 사용자의 상호작용에 대한 제어력을 높일 수 있습니다.
일반적으로 메서드는 이벤트 리스너 함수 내부에서 호출됩니다.
이를 호출하면 이벤트가 기본 동작을 수행하지 않고, 대신 개발자가 정의 한 동작을 수행하도록 합니다.
✨ scrollIntoView() 메서드
DOM 요소를 현재 뷰포트 내에서 가장 가까운 부모 스크롤 컨테이너로 스크롤하는 메서드입니다.
해당 요소가 현재 뷰포트에 보이지 않을 경우 요소를 뷰포트로 스크롤하고,
요소가 이미 뷰포트에 있을 경우 아무런 작업을 수행하지 않습니다.
반응형