html 구조입니다.
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript 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>
<li><a href="parallaxEffect09.html">9</a></li>
<li><a href="parallaxEffect10.html">10</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="parallaxs__wrap">
<section id="section1" class="parallaxs__item">
<span class="parallaxs__item__num">01</span>
</section>
<!-- //section1 -->
<section id="section2" class="parallaxs__item">
<span class="parallaxs__item__num">02</span>
</section>
<!-- //section2 -->
<section id="section3" class="parallaxs__item">
<span class="parallaxs__item__num">03</span>
</section>
<!-- //section3 -->
<section id="section4" class="parallaxs__item">
<span class="parallaxs__item__num">04</span>
</section>
<!-- //section4 -->
<section id="section5" class="parallaxs__item">
<span class="parallaxs__item__num">05</span>
</section>
<!-- //section5 -->
<section id="section6" class="parallaxs__item">
<span class="parallaxs__item__num">06</span>
</section>
<!-- //section6 -->
<section id="section7" class="parallaxs__item">
<span class="parallaxs__item__num">07</span>
</section>
<!-- //section7 -->
<section id="section8" class="parallaxs__item">
<span class="parallaxs__item__num">08</span>
</section>
<!-- //section8 -->
<section id="section9" class="parallaxs__item">
<span class="parallaxs__item__num">09</span>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //main -->css 입니다.
#header {
position: fixed;
z-index: 10000;
}
.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;
}<body> 태그에는 "img01", "bg01", "font01"과 같은 여러 클래스가 할당되어 있습니다.
<body> 섹션 내에는 <header> 요소가 있으며, 제목, 단락 및 탐색 링크로 구성된 정렬되지 않은 목록이 포함되어 있습니다.
본문 내용은 "main" ID가 있는 <main> 태그로 둘러싸여 있습니다.
<main> 섹션 내에는 "parallaxs__wrap" 클래스가 있는 <div>가 있습니다. 이 div는 여러 <section> 요소를 포함하고 있으며 각각 다른 ID와 클래스를 가지고 있습니다.
각 <section>은 패럴랙스 효과의 다른 섹션을 나타내며 고유한 ID와 "parallaxs__item__num" 클래스를 가진 <span> 요소를 포함하여 숫자를 표시합니다.
주요 콘텐츠 이후에는 "parallax__info" 클래스를 가진 <aside> 요소가 있습니다. 이 요소에는 "scroll" 클래스를 가진 <div>와 그 안에 있는 <span> 요소가 있습니다. 이는 현재 스크롤 위치를 표시합니다.
마지막으로, <script> 태그가 포함되어 있으며, GSAP(GreenSock Animation Platform) 라이브러리를 포함하고 있으며 패럴랙스 스크롤링 효과를 위한 JavaScript 코드가 포함되어 있습니다.
JavaScript 코드는 GSAP를 사용하여 스크롤 위치를 계산하고 스크롤에 따라 패럴랙스 컨테이너의 수평 위치를 조정합니다. 또한 <span> 요소에 표시된 스크롤 위치를 업데이트합니다.
전반적으로 이 코드는 사용자가 수직으로 스크롤할 때 섹션들이 수평으로 이동하는 패럴랙스 스크롤링 효과를 갖는 웹 페이지를 설정합니다.
스크립트 부분
const parallaxCont = document.querySelector(".parallaxs__wrap"): parallaxs__wrap 클래스를 가진 요소를 선택하여 parallaxCont 변수에 할당합니다. 이 변수는 패럴랙스 컨테이너를 나타냅니다.
function scroll() { ... }: scroll 함수를 정의합니다. 이 함수는 스크롤 이벤트가 발생할 때 호출됩니다.
let scrollTop = window.pageYOffset;: scrollTop 변수에 현재 창의 수직 스크롤 위치를 저장합니다.
let parallaxWidth = parallaxCont.offsetWidth;: parallaxCont 요소의 너비를 parallaxWidth 변수에 저장합니다.
document.body.style.height = parallaxWidth + 'px';: <body> 요소의 높이를 parallaxWidth 값으로 설정하여 스크롤이 가능한 영역을 만듭니다.
let viewWidth = parallaxWidth - window.innerWidth;: 뷰포트의 너비를 viewWidth 변수에 저장합니다.
let viewHeight = parallaxWidth - window.innerHeight;: 뷰포트의 높이를 viewHeight 변수에 저장합니다.
let goLeft = scrollTop * (viewWidth / viewHeight);: goLeft 변수에 현재 스크롤 위치를 기반으로 수평 이동 거리를 계산하여 저장합니다.
gsap.to(parallaxCont, {left: -goLeft, ease: "power2.out"});: GSAP의 to 메서드를 사용하여 parallaxCont 요소의 수평 위치를 -goLeft 값으로 애니메이션화합니다. ease: "power2.out"는 이동에 적용되는 이징 함수입니다.
document.querySelector(".scroll span").innerText = Math.round(scrollTop);: 스크롤 위치를 표시하는 요소의 내부 <span> 요소를 선택하고 innerText를 사용하여 스크롤 위치를 반올림하여 표시합니다.
requestAnimationFrame(scroll);: 다음 프레임을 요청하여 scroll 함수를 반복 실행합니다.
즉, 이 코드는 스크롤 이벤트가 발생할 때마다 스크롤 위치에 따라 패럴랙스 컨테이너의 수평 위치를 조정하고, 스크롤 위치를 표시하는 요소를 업데이트하여 화면에 패럴랙스 스크롤링 효과를 구현합니다.