한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
<!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>패럴럭스 이펙트09</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 {
}
.parallaxs__item {
width: 100vw;
height: 100vh;
position: relative;
}
#section1 {
background-color: #111;
z-index: 7000;
}
#section2 {
background-color: #222;
z-index: 6000;
}
#section3 {
background-color: #333;
z-index: 5000;
}
#section4 {
background-color: #444;
height: 400vh;
z-index: 4000;
}
#section4 .sec4 {
position: fixed;
left: 0;
top: 0;
width: 400vh;
height: 100%;
display: flex;
}
#section4 .sec4 article {
width: 200vh;
height: 100vh;
position: relative;
}
#section4 .sec4 article:nth-child(1){background-color: #4fdb85;}
#section4 .sec4 article:nth-child(2){background-color: #3eaf69;}
#section4 .sec4 article:nth-child(3){background-color: #297c49;}
#section5 {
background-color: #555;
z-index: 5000;
}
#section6 {
background-color: #666;
z-index: 6000;
}
#section7 {
background-color: #777;
z-index: 7000;
}
#section8 {
background-color: #888;
z-index: 8000;
}
#section9 {
background-color: #999;
z-index: 9000;
}
.parallaxs__item__num {
position: absolute;
bottom: 20px;
right: 20px;
color: #fff;
font-size: 10vw;
z-index: 1000;
}
.parallax__info {
z-index: 10000;
}
</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><a href="parallaxEffect08.html">8</a></li>
<li class="active"><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">
<div class="sec4">
<article><span class="parallaxs__item__num">04-1</span></article>
<article><span class="parallaxs__item__num">04-2</span></article>
<article><span class="parallaxs__item__num">04-3</span></article>
</div>
</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 section4 = document.querySelector("#section4").offsetTop
function scroll(){
let scrollTop = window.pageYOffset;
let goLeft = scrollTop - section4
if(scrollTop >= document.querySelector("#section4").offsetTop){
gsap.to(".sec4",{left: -goLeft, ease:"linear" })
}
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>
</body>
</html>가로 슬라이드를 시작해주고 싶은 부분의 섹션 안 쪽에 섹션을 3개 더 만들어줍니다.
#section4 {
background-color: #444;
height: 400vh;
z-index: 4000;
}
#section4 .sec4 {
position: fixed;
left: 0;
top: 0;
width: 400vh;
height: 100%;
display: flex;
}
#section4 .sec4 article {
width: 200vh;
height: 100vh;
position: relative;
}그 후 그 시작한 부분의 섹션의 height값과 생성해준 섹션의 width값이 같게 css를 설정해줍니다.
스크립트
section4ID가 "section4"인 요소의 상단 오프셋 위치 값이 할당됩니다. offsetTop이 값을 검색하는 데 사용됩니다.
함수의 이름은 scroll스크롤 이벤트 핸들러로 사용됨을 나타냅니다. scrollTop를 사용하여 얻은 페이지의 현재 세로 스크롤 위치입니다 window.pageYOffset. goLeftscrollTop와 의 차이로 계산됩니다
section4. 이 값은 수평으로 이동할 거리를 나타냅니다.
이 코드는 ID가 "section4"인 요소의 위치 scrollTop보다 크거나 같은지 확인합니다. offsetTop이 조건은 애니메이션을 트리거하는 데 사용됩니다. 조건이 참이면 gsap.to메소드가 호출되어 "sec4" 클래스로 요소를 애니메이션화합니다. 이 left속성은 의 값으로 애니메이션되어 -goLeft수평 이동 효과를 생성합니다.
여유는 "선형"으로 설정됩니다. 이 코드는 "scroll span" 클래스로 요소의 텍스트 콘텐츠를 업데이트하여 의 반올림된 값을 표시합니다
scrollTop. requestAnimationFramescroll다음 사용 가능한 프레임에서 실행할 기능을 예약하는 데 사용됩니다 . 이렇게 하면 페이지가 스크롤될 때 함수가 계속 호출되어 부드러운 애니메이션 효과가 생성됩니다.
마지막으로 scroll()함수가 호출되어 함수의 초기 실행을 시작합니다.