소개
안녕하세요!. 웹스토리보이입니다. 가장 기본적인 패럴랙스 스크롤링 이펙트 메뉴 이동을 만들어 보겠습니다. 쉬우니까 잘 따라해보세요~
-
parallax
- 01_parallax01
- 02_parallax02
- 03_parallax03
- 04_parallax04
- 05_parallax05
- 06_parallax06
- 07_parallax07
- 08_parallax08
- 09_parallax09
- parallax09_01.html :
이론
!를 치고 tab을 누르겠습니다.
언어를 ko로 변경하고 title은 메뉴 유형01로 변경하겠습니다.
코드
<!DOCTYPE html>
<html lang="en">
<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>패랠랙스 이펙트</title>
<link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
}
a {
color: #fff;
text-decoration: none;
}
body {
color: #fff;
font-family: "NexonLv1Gothic";
font-weight: 300;
}
#parallax__title {
position: fixed;
left: 0; top: 0;
padding: 20px;
z-index: 10000;
}
#parallax__title h1 {
font-size: 30px;
border-bottom: 1px dashed #fff;
margin-bottom: 10px;
padding-bottom: 5px;
font-weight: 400;
display: inline-block;
}
#parallax__title p {
font-size: 16px;
}
#parallax__title ul {
margin-top: 10px;
}
#parallax__title li {
display: inline;
}
#parallax__title li a {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px dashed #fff;
display: inline-block;
text-align: center;
line-height: 20px;
font-size: 12px;
}
#parallax__title li.active a {
background: #fff;
color: #000;
}
#parallax__nav {
position: fixed;
right: 20px;
top: 20px;
z-index: 1000;
background-color: rgba(0,0,0,0.4);
padding: 15px 20px;
border-radius: 50px;
}
#parallax__nav li {
list-style: none;
display: inline;
}
#parallax__nav li a {
display: inline-block;
width: 30px;
height: 30px;
padding: 5px;
text-align: center;
line-height: 30px;
}
#parallax__nav li.active a {
background: #fff;
color: #000;
border-radius: 50%;
}
/* parallax__cont */
#parallax__cont { }
.content__item {
width: 100vw;
height: 100vh;
position: relative;
}
#section1 {background-color: #999; z-index: 7000;}
#section2 {background-color: #888; z-index: 6000;}
#section3 {background-color: #777; z-index: 5000;}
#section4 {
background-color: #666; z-index: 4000;
height: 400vh;
}
#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: rgb(255, 95, 95);}
#section4 .sec4 article:nth-child(2){background: rgb(255, 195, 95);}
#section4 .sec4 article:nth-child(3){background: rgb(155, 195, 95);}
#section5 {background-color: #555; z-index: 5000;}
#section6 {background-color: #444; z-index: 6000;}
#section7 {background-color: #333; z-index: 7000;}
#section8 {background-color: #222; z-index: 8000;}
#section9 {background-color: #111; z-index: 9000;}
.content__item__num {
position: absolute;
bottom: 20px;
right: 20px;
color: #fff;
font-size: 20vw;
z-index: 10000;
letter-spacing: -1vw;
font-family: 'Lato';
}
</style>
</head>
<body>
<header id="parallax__title">
<h1><a href="parallaxEffect.html">JavaScript Parallax Effect09</a></h1>
<p>패럴랙스 스크롤링 효과 - 가로세로 모드</p>
<ul>
<li><a href="parallax_result01.html">1</a></li>
<li><a href="parallax_result02.html">2</a></li>
<li><a href="parallax_result03.html">3</a></li>
<li><a href="parallax_result04.html">4</a></li>
<li><a href="parallax_result05.html">5</a></li>
<li><a href="parallax_result06.html">6</a></li>
<li><a href="parallax_result07.html">7</a></li>
<li><a href="parallax_result08.html">8</a></li>
<li class="active"><a href="parallax_result09.html">9</a></li>
</ul>
</header>
<!-- //parallax__title -->
<main id="parallax__cont">
<section id="section1" class="content__item">
<span class="content__item__num">01</span>
</section>
<!-- //section1 -->
<section id="section2" class="content__item">
<span class="content__item__num">02</span>
</section>
<!-- //section2 -->
<section id="section3" class="content__item">
<span class="content__item__num">03</span>
</section>
<!-- //section3 -->
<section id="section4" class="content__item">
<div class="sec4">
<article><span class="content__item__num">04-1</span></article>
<article><span class="content__item__num">04-2</span></article>
<article><span class="content__item__num">04-3</span></article>
</div>
</section>
<!-- //section4 -->
<section id="section5" class="content__item">
<span class="content__item__num">05</span>
</section>
<!-- //section5 -->
<section id="section6" class="content__item">
<span class="content__item__num">06</span>
</section>
<!-- //section6 -->
<section id="section7" class="content__item">
<span class="content__item__num">07</span>
</section>
<!-- //section7 -->
<section id="section8" class="content__item">
<span class="content__item__num">08</span>
</section>
<!-- //section8 -->
<section id="section9" class="content__item">
<span class="content__item__num">09</span>
</section>
<!-- //section9 -->
</main>
<!-- //parallax__cont -->
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script>
function scroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY
//4번째 섹션에 왔을 때 스크롤탑을 0으로 초기화해서 시작
let offset = scrollTop - document.querySelector("#section4").offsetTop;
if(scrollTop >= document.querySelector("#section4").offsetTop){
//document.querySelector(".sec4").style.backgroundColor = "blue";
gsap.to(".sec4", {left: -offset, ease: "linear"})
}
requestAnimationFrame(scroll);
}
scroll();
</script>
</body>
</html>
view2
view3
view4
참고
728x90
