728x90
- 마지막 패럴럭스 모드 입니다.
- 가로와 세로를 합친 모습입니다.
- 가로만 있는 것은 8번에 있습니다.
<!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">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/parallax.css">
<style>
#header {
position: fixed;
z-index: 10000;
}
.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: rgba(255, 95, 95);}
#section4 .sec4 article:nth-child(2) {background-color: rgba(255, 195, 95);}
#section4 .sec4 article:nth-child(3) {background-color: rgba(155, 195, 95);}
#section5 {background-color: #555; z-index: 5000;}
#section6 {background-color: #555; z-index: 6000;}
#section7 {background-color: #666; z-index: 7000;}
#section8 {background-color: #777; z-index: 8000;}
#section9 {background-color: #888; z-index: 9000;}
.parallaxs__item__num {
position: absolute;
bottom: 20px;
right: 20px;
color: #fff;
font-size: 10vw;
z-index: 1000;
}
.parallaxs__info {
z-index: 10000;
}
</style>
<title>페럴럭스 이펙트</title>
</head>
<body class="bg01 font01">
<header id="header">
<h1>Javascript parallax Effect09</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>
<li><a href="parallaxEffectAA.html">10</a></li>
</ul>
</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">
<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>
<!-- //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>
<aside class="parallax__info">
<div class="scroll">scrollTop : <span>0</span>px</div>
</aside>
<!-- //footer -->
<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 >= section4) {
gsap.to(".sec4", {left: -goLeft, ease: "linear"})
}
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>
</body>
</html>- 전체 코드 입니다.
- 기본적인 개념은 섹션4에 있는 4-1 ~ 4-3 들을 position을 fixed 즉 고정시켜 놓았습니다.
- z-index의 차이를 주어서 눈에는 보이지 않지만 사실 맨 윗쪽부터 4-1 ~ 4-3들이 있는 것입니다.
- 그리고 섹션4의 z-index만 4-1 ~ 4-3보다 낮게 주어서 섹션4에 오면 4-1 ~ 4-3들이 보이게 해주었습니다.
- 그리고 섹션4에서 4-1 ~ 4-3들이 옆으로 가게 해주면 됩니다.
- 그리고 다시 스크롤이 되게 끔 해주면 되는 겁니다.
- 사실 좀 많이 어렵습니다.
- 그럼 가로모드의 기본형식인 8번을 함께 보시죠
<style>
#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;
right: 20px !important;
bottom: 20px;
color: #fff;
font-size: 10vw;
z-index: 1000;
}
</style> <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);
console.log(parallaxWidth);
gsap.to(parallaxCont, {left: -goLeft, ease: "power2.out"});
document.querySelector(".scroll span").innerText = Math.round(scrollTop);
requestAnimationFrame(scroll);
}
scroll();
</script>
- 중요한 건 스크립트와 CSS 코드입니다.
- 전체 워랩을 고정시켜두고 display:flex를 사용해서 안에 있는 것들을 가로로 전환시켜 주었습니다.
- 그리고 가로 값 만큼 세로 값으로 주고 스크롤를 내린 값 만큼 가로로 가게 하였습니다.
끝!