728x90
패럴랙스효과를 나타내기
전체 소스는 요기
body를 볼게요 !
<body class = "font06 bg02">
<header id="header">
<h1>Javascript Parallax Effect01</h1>
<p>페럴랙스 이펙트 : 메뉴 효과</p>
<ul>
<li class="active"><a href="parallaxEffect01.html">1</a></li>
...
<li class="active"><a href="parallaxEffect09.html">9</a></li>
</ul>
</header>
<!-- //header-->
<nav class="parallax__nav">
<ul>
<li class="active"><a href="#section01">메뉴1</a></li>
...
<li><a href="#section09">메뉴9</a></li>
</ul>
</nav>
<!-- parallax__nav -->
<main id="main">
<div class="parallax__wrap">
<section id="section01" class="parallax__item">
<span class="parallax__item__num">01</span>
<h2 class="parallax__item__title">Section01</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">"성공의 비결은 실패에서 배우는 것이다." - 콜린 파월</p>
</section><!-- section 1 -->
....
</section><!-- section 9 -->
</div>
</main>
<!-- //main-->
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
<div class="info">
<ul>
<li>#section01 offsetTop() : <span class="offset01">0</span>px</li>
<li>#section02 offsetTop() : <span class="offset02">0</span>px</li>
<li>#section03 offsetTop() : <span class="offset03">0</span>px</li>
<li>#section04 offsetTop() : <span class="offset04">0</span>px</li>
<li>#section05 offsetTop() : <span class="offset05">0</span>px</li>
<li>#section06 offsetTop() : <span class="offset06">0</span>px</li>
<li>#section07 offsetTop() : <span class="offset07">0</span>px</li>
<li>#section08 offsetTop() : <span class="offset08">0</span>px</li>
<li>#section09 offsetTop() : <span class="offset09">0</span>px</li>
</ul>
</div>
</aside>
<!-- parallax__info -->
<footer id="footer">
<a href="mailto:getgrovy@gmail.com">getgrovy@gmail.com</a>
</footer>
<!-- //footer-->
</body>위처럼 body영역엔 이미지만 넣어줬어요 !
따로 css를 전부 빼서 작업했어요
css 소스는 요기
script 부분을 볼게용
const parllaxInfoScroll =document.querySelector(".parallax__info .scroll span");
const infoli = document.querySelectorAll(".info ul li span");
window.addEventListener("scroll" , ()=>{
//스크롤의 위치를 실시간으로 표시
let scrollTop = window.pageYOffset;
// let scrollTop = window.pageYOffset || window.scrollY|| document.documentElement.scrollTop;
parllaxInfoScroll.innerHTML =parseInt(scrollTop);
//상단의 parallax__nav를 active해주기 위해
//forEach문으로 순서대로 반복해줌
//if(scrollTop > item.offsetTop-200){
//요 부분에서 스크롤위치가 parallax__item.offsetTop 보다 클경우
//내부에 있는 forEach문으로 active 변경!
document.querySelectorAll(".parallax__item").forEach((item, index)=>{
if(scrollTop > item.offsetTop-200){
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"
});
})
});infoli에 값 top 을 설정하는방법 3가지
const infoli = document.querySelectorAll(".info ul li span");
document.querySelector(".info .offset01 ").innerHTML = document.getElementById("section01").offsetTop;
document.querySelector(".info .offset02 ").innerHTML = document.getElementById("section02").offsetTop;
document.querySelector(".info .offset03 ").innerHTML = document.getElementById("section03").offsetTop;
document.querySelector(".info .offset04 ").innerHTML = document.getElementById("section04").offsetTop;
document.querySelector(".info .offset05 ").innerHTML = document.getElementById("section05").offsetTop;
document.querySelector(".info .offset06 ").innerHTML = document.getElementById("section06").offsetTop;
document.querySelector(".info .offset07 ").innerHTML = document.getElementById("section07").offsetTop;
document.querySelector(".info .offset08 ").innerHTML = document.getElementById("section08").offsetTop;
document.querySelector(".info .offset09 ").innerHTML = document.getElementById("section09").offsetTop;
for(let i = 0 ; i < infoli.length ; i++){
document.querySelector(".info .offset0"+(i+1)).innerHTML = document.getElementById("section0"+(i+1)).offsetTop;
}
let index = 1;
for ( let el of infoli){
el.innerHTML = document.getElementById("section0"+index+"").offsetTop;
index++;
}
infoli.forEach( (el,index) => {
console.log(el,index)
el.innerHTML = document.getElementById("section0"+(index+1)+"").offsetTop;
});노가다방식
for문
for of문
forEach문을 사용해서 높이값을
좌측 하단에 넣어줬어요