한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
가로 패럴럭스효과
<!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>패럴럭스 이펙트08</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/parallax.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<style>
main {
width: 100%;
/* overflow: hidden; */
}
body {
}
#header {
z-index: 100;
position: fixed;
}
.parallaxs__wrap {
position: fixed;
left: 0;
top: 0;
display: flex;
}
.parallaxs__item {
width: 100vw;
height: 100vh;
position: relative;
}
#section1 {
background-color: #111;
}
#section2 {
background-color: #222;
}
#section3 {
background-color: #333;
}
#section4 {
background-color: #444;
}
#section5 {
background-color: #555;
}
#section6 {
background-color: #666;
}
#section7 {
background-color: #777;
}
#section8 {
background-color: #888;
}
#section9 {
background-color: #999;
}
.parallaxs__item__num {
position: absolute;
bottom: 20px;
right: 20px;
color: #fff;
font-size: 10vw;
z-index: 1000;
}
</style>
</head>
<body class="bg02 img02 font08">
<header id="header">
<h1>Javasrcipt parallax Effect08</h1>
<p>패럴럭스 이펙트 : 가로효과</p>
<ul>
<li><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>
<li class="active"><a href="parallaxEffect08.html">8</a>
<li><a href="parallaxEffect09.html">9</a></li>
</ul>
</header>
<!-- header -->
<!-- parallax__nav -->
<main class="main">
<div class="parallaxs__wrap">
<section id="section1" class="parallaxs__item">
<span class="parallaxs__item__num">01</span>
</section>
<!--//section-->
<section id="section2" class="parallaxs__item">
<span class="parallaxs__item__num">02</span>
</section>
<!--//section-->
<section id="section3" class="parallaxs__item">
<span class="parallaxs__item__num">03</span>
</section>
<!--//section-->
<section id="section4" class="parallaxs__item">
<span class="parallaxs__item__num">04</span>
</section>
<!--//section-->
<section id="section5" class="parallaxs__item">
<span class="parallaxs__item__num">05</span>
</section>
<!--//section-->
<section id="section6" class="parallaxs__item">
<span class="parallaxs__item__num">06</span>
</section>
<!--//section-->
<section id="section7" class="parallaxs__item">
<span class="parallaxs__item__num">07</span>
</section>
<!--//section-->
<section id="section8" class="parallaxs__item">
<span class="parallaxs__item__num">08</span>
</section>
<!--//section-->
<section id="section9" class="parallaxs__item">
<span class="parallaxs__item__num">09</span>
</section>
<!--//section-->
</div>
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
const parallaxCont = document.querySelector(".parallaxs__wrap");
function scroll(){
let scrollTop = window.pageYOffset;
let parallaxWidth = parallaxCont.offsetWidth;
document.body.style.height = parallaxWidth + 'px';
let viewWidth = parallaxWidth - window.innerWidth;
let viewHeight = parallaxWidth - window.innerHeight;
let goLeft = scrollTop * (viewWidth / viewHeight);
gsap.to(parallaxCont, {left: -goLeft, ease: "power2.out"});
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>
</body>
</html>기존 있던 세로형식의 사이트를 스크롤을 내리면 가로로 넘어가게 해주는 효과이다.
기존코드에서
.parallaxs__wrap {
position: fixed;
left: 0;
top: 0;
display: flex;parallaxs__wrap에 display: flex를 주어 하위요소인 .parallaxs__item를 가로로 정렬시킵니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
const parallaxCont = document.querySelector(".parallaxs__wrap");
function scroll(){
let scrollTop = window.pageYOffset;
let parallaxWidth = parallaxCont.offsetWidth;
document.body.style.height = parallaxWidth + 'px';
let viewWidth = parallaxWidth - window.innerWidth;
let viewHeight = parallaxWidth - window.innerHeight;
let goLeft = scrollTop * (viewWidth / viewHeight);
gsap.to(parallaxCont, {left: -goLeft, ease: "power2.out"});
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>scroll이라는 함수는 스크롤 이벤트 핸들러로 사용될 것을 나타냅니다.
parallaxCont는 .parallaxs__wrap 클래스를 가진 요소의 참조를 할당받습니다. 즉, HTML 문서에서 해당 클래스를 가진 요소를 선택합니다.
scrollTop는 현재 스크롤된 페이지의 Y축 위치를 나타냅니다.
window.pageYOffset을 통해 값을 가져옵니다. parallaxWidth는 parallaxCont 요소의 너비를 나타냅니다. offsetWidth 속성을 사용하여 값을 가져옵니다. document.body.style.height를 통해 문서의 높이를 parallaxWidth 값으로 설정합니다.
이렇게 함으로써 문서의 전체 높이가 스크롤 영역에 맞게 설정됩니다.
viewWidth는 뷰포트의 너비와 parallaxWidth의 차이를 나타냅니다. 뷰포트 너비에서 parallaxWidth를 빼는 것으로 계산됩니다. viewHeight는 뷰포트의 높이와 parallaxWidth의 차이를 나타냅니다.
뷰포트 높이에서 parallaxWidth를 빼는 것으로 계산됩니다. goLeft는 현재 스크롤된 페이지의 Y축 위치에 따라 가로로 이동할 거리를 계산합니다.
scrollTop을 (viewWidth / viewHeight)로 곱하여 값을 구합니다. gsap.to를 사용하여 parallaxCont 요소의 left 속성을 -goLeft로 애니메이션화합니다. 이를 통해 요소가 가로로 이동하는 효과를 만듭니다. 애니메이션의 이징(easing)은 "power2.out"으로 지정됩니다. document.querySelector(".scroll span")을 사용하여 스크롤 값이 표시될 요소를 선택합니다. innerText를 사용하여 scrollTop 값을 반올림하여 요소의 내용으로 설정합니다.
requestAnimationFrame을 사용하여 scroll 함수를 다음 프레임에 실행합니다. 이를 통해 스크롤 이벤트가 발생할 때마다 함수가 호출되고 부드러운 애니메이션 효과를 구현할 수 있습니다. 마지막으로 scroll() 함수를 호출하여 초기에 함수가 실행되도록 합니다.