728x90
반응형
parallax effect - pageYoffset || scrollY || scrollTop
HTML 1
<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>
<!-- li*9>a[href="#section$"]{메뉴$} -->
</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 -->
<!-- section#section$.content__item*9 하면 한번에 9개 생성-->
</div>
</main>
<!-- main -->이 부분은 명언과 그림들이 들어갈 구조를 지정해주고 메뉴와 각 부분의 스크롤을 연동시키는 부분입니다.
최상단에는 로고와 메뉴가 있고, 메인 컨텐츠(명언)은 9개로 나뉘어져 있습니다.
각 섹션 안에는 번호와 타이틀, 그리고 이미지, 명언이 정해져 있습니다.
섹션에 "a" 태그를 이용하여 각 메뉴를 클릭하면 해당 section으로 이동하게 됩니다.
각 section은 "parallax__item" 클래스로 정의되어 있으며, "section" 태그를 이용하여 각각의 section을 구성하고 있습니다.
parallax scrolling 기법입니다.
HTML 2
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
<div class="info">
<ul>
<li>#section1 offsetTop() : <span class="offset1">0</span>px</li>
<li>#section2 offsetTop() : <span class="offset2">0</span>px</li>
<li>#section3 offsetTop() : <span class="offset3">0</span>px</li>
<li>#section4 offsetTop() : <span class="offset4">0</span>px</li>
<li>#section5 offsetTop() : <span class="offset5">0</span>px</li>
<li>#section6 offsetTop() : <span class="offset6">0</span>px</li>
<li>#section7 offsetTop() : <span class="offset7">0</span>px</li>
<li>#section8 offsetTop() : <span class="offset8">0</span>px</li>
<li>#section9 offsetTop() : <span class="offset9">0</span>px</li>
<!-- li*9{#section$ offset() : }>span.offset${px} -->
</ul>
</div>
</aside>
<!-- parallax__info -->Script
<script>
const scroll = document.querySelector(".scroll span")
const Info = document.querySelectorAll(".info span")
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop; // scrollTop을 구할 수 있는 방법 세가지 pageYoffset을 제일 많이 씀
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) => {
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior: "smooth"
})
})
})
//info
document.querySelector(".scroll span").innerText = parseInt(scrollTop);
// const Info = document.querySelector(".scroll span")
// Info.innerHTML = window.pageYOffset;
document.querySelector(".info .offset1").innerText = document.getElementById("section1").offsetTop;
document.querySelector(".info .offset2").innerText = document.getElementById("section2").offsetTop;
document.querySelector(".info .offset3").innerText = document.getElementById("section3").offsetTop;
document.querySelector(".info .offset4").innerText = document.getElementById("section4").offsetTop;
document.querySelector(".info .offset5").innerText = document.getElementById("section5").offsetTop;
document.querySelector(".info .offset6").innerText = document.getElementById("section6").offsetTop;
document.querySelector(".info .offset7").innerText = document.getElementById("section7").offsetTop;
document.querySelector(".info .offset8").innerText = document.getElementById("section8").offsetTop;
document.querySelector(".info .offset9").innerText = document.getElementById("section9").offsetTop;
// for문
// for(let i=1; i<=9; i++){
// document.querySelector(".info .offset"+i).innerText = document.getElementById("section"+i).offsetTop;
// };
//forEach문
// info.forEach((el,i)=> {
// el.innerText = document.getElementById("section"+(i+1)).offsetTop
// });
//for of문
// for (const [i, el] of info.entries()) {
// el.innerText = document.getElementById(`section${i+1}`).offsetTop;
// }
//for in문
// for (const i in info) {
// info[i].innerText = document.getElementById(`section${parseInt(i)+1}`).offsetTop;
// }
});
</script>window.addEventListener("scroll", () => { ... } 부분은 스크롤이 일어날 때 실행될 함수를 등록하는 부분입니다.
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
는 현재 스크롤 위치를 구하는 변수를 선언하는 부분입니다. window.pageYOffset, window.scrollY, document.documentElement.scrollTop는 각각 브라우저마다 스크롤 위치를 구하는 방법이 다를 수 있으므로, 이들 중 어떤 것이든 사용 가능한 값을 scrollTop에 할당합니다.
document.querySelectorAll(".parallax__item").forEach((item, index) => { ... }는 .parallax__item
클래스를 가진 요소들에 대해 반복문을 돌리는 부분입니다. 각 요소들의 offsetTop 값을 구해서 현재 스크롤 위치보다 작으면, 이전 요소들은 모두 제외하고 현재 요소가 활성화된 것으로 표시하는 부분입니다.
document.querySelectorAll(".parallax__nav li a").forEach(li => { ... }는 .parallax__nav li a
클래스를 가진 요소들에 대해 클릭 이벤트를 등록하는 부분입니다. 클릭이 발생하면 해당 요소의 href 속성 값으로 지정된 위치로 부드러운 스크롤 이동을 수행합니다.
document.querySelector(".info ...").innerText
.info 클래스를 가진 요소들에 대해 스크롤 위치에 대한 정보를 업데이트하는 부분입니다. 이 부분에서는 각 섹션 요소의 offsetTop 값을 .offset1, .offset2 등의 클래스를 가진 요소에 업데이트합니다.