“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
반응형
패럴랙스를 이용하여 이미지 스크롤 페이지 만들기
이미지와 함께 명언이 나오고, 보고있는 화면의 위치도 알려주는 페이지를 만들어 보았습니다.
완성화면
.✈ . HTML
<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>
</ul>
</header>
<!-- //header -->
<nav class="parallax__nav">
<ul>
<!-- li*9>a[href="#section$"]{메뉴$} -->
<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">아는 사람은 좋아하는 사람만 못하고, <br>좋아하는 사람은 즐기는 사람만 못하다.</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">지혜로운 사람은 물을 좋아하고<br> 어진사람은 산을 좋아한다.</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">지혜로운 사람은 미혹되지 않고,<br>어진사람은 근심하지 않고<br>용감한 사람은 두려워하지 않는다</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>9{#section$ offset() : }>span.offset${px}
li>9{#section$ offset() : }>span.offset${0}>{px} -->
<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>
<footer id="footer">
<a href="mailto:aimee00418@gmail.com">aimee00418@gmail.com</a>
</footer>
<!-- //footer -->
.✈ . CSS
- 너무 길어서 생략
- 이미지를 css로 포토샵 효과 적용
참조 : https://webzz.tistory.com/444
.✈ . JAVASCRIPT
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || window.scrollY || document.documentElement.scrollTop;
console.log(window.scrollY);
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")).scrollIntView({
behavior: "smooth"
})
})
})
document.querySelector(".scroll span").innerText = parseInt(scrollTop);
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;
})
✈ .기본문
//info
document.querySelector(".scroll span").innerText = parseInt(scrollTop);
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<10; i++){
document.querySelector(`.info .offset${i}`).innerText = document.getElementById(`section${i}`).offsetTop;
};✈ . forEach문
document.querySelectorAll(".info li span").forEach((e, i) => {
e.innerHTML = document.getElementById(`section${i+1}`).offsetTop;
});✈ . for in
const spans = document.querySelectorAll(".info li span");
for(let i in spans){
if(spans.hasOwnProperty(i)){
const e = spans[i];
e.innerText = document.getElementById(`section${parseInt(i)+1}`).offsetTop;
}
}✈ . for of
const spans = document.querySelectorAll(".info li span");
let i = 1;
for(let e of spans){
e.innerHTML = document.getElementById(`section${i}`).offsetTop;
i++;
}