...
728x90
반응형
패럴랙스 이펙트로 가로로 스크롤 하듯 만들기
패럴랙스 이펙트로 스크롤할 때 가로로 넘어가는 것처럼 보이게 만들어 보겠습니다.
HTML 작성하기
<!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">
</head>
<body class="img01 bg01 seoulhangang container">
<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 -->
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- parallax__info -->
</body>
</html>Javascript 작성하기
<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").innerHTML = scrollTop;
requestAnimationFrame(scroll);
}
scroll()
</script>Javascript 정리해보기
- scroll 함수
- window.pageYoffset을 사용해 현재 보이는 화면의 Y값(스크롤값)을 구합니다.
- 패럴랙스 내용이 담겨있는 parallaxs__wrap의 선택자를 만들어 넓이를 구해 parallaxWidth변수에 저장합니다.
- 문서 body의 height를 pallaxWidth값과 동일하게 만듭니다.
- goLeft 변수에 scrollTop * ( 화면의 넓이 / 화면의 높이 )값을 저장합니다. (화면 비율)
- gsap를 사용해 parallaxCont를 왼쪽으로 -goLeft만큼 이동합니다.
가로+세로의 패럴랙스 이펙트
Javascript 작성하기
<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) * 1.3;
if(scrollTop >= section4){
gsap.to(".sec4", {left: -goLeft, ease: "linear"})
}
document.querySelector(".scroll span").innerHTML = scrollTop;
requestAnimationFrame(scroll);
}
scroll()
</script>Javascript 정리해보기
- scroll 함수
- section4 변수에 #section4의 offsetTop값을 저장합니다. ( #section4의 스크롤값 )
- goLeft변수에 scrollTop 에서 section4의 값을 빼줍니다. ( 위치에 도달했을 때 0부터 시작하기 위함, 속도조절을 위해 1.3배를 해주었습니다. )
- scrollTop값이 section4보다 커질 때 sec4를 왼쪽으로 -goLeft만큼 움직입니다. ( 실제로는 #section4의 길이인 400vh만큼 스크롤하는 중 )
이상으로 가로로 넘어가도록 하는 패럴랙스 이펙트를 만들어 보았습니다.
728x90
반응형