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>페럴렉스 이펙트04</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/parallax.css">
</head>
<body class="img01 bg01 font01">
<header id="header">
<h1>JavaScript Parallax Effect04</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 class="active"><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>
</ul>
</header>
<!-- //header-->
<nav class="parallax__nav">
<ul>
<li class="active"><a href="#section1">메뉴1</a></li>
<li><a href="#section2">메뉴2</a></li>
<li><a href="#section3">메뉴3</a></li>
<li><a href="#section4">메뉴4</a></li>
<li><a href="#section5">메뉴5</a></li>
<li><a href="#section6">메뉴6</a></li>
<li><a href="#section7">메뉴7</a></li>
<li><a href="#section8">메뉴8</a></li>
<li><a href="#section9">메뉴9</a></li>
</ul>
</nav>
<main id="main">
<div class="parallax__wrap">
<section id="section1" class="parallax__item">
<span class="parallax__item__num">01</span>
<h2 class="parallax__item__title">section1</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">불가능은 자신이나 다른 사람의 머릿속에 존재하는 것일 뿐, 현실은 아니다.</p>
</section>
<!-- //section1 -->
<section id="section2" class="parallax__item">
<span class="parallax__item__num">02</span>
<h2 class="parallax__item__title">section2</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">성공한 사람들은 실패한 것을 견뎌낸 것이 아니라 실패를 끝까지 포기하지 않은 것이다.</p>
</section>
<!-- //section2 -->
<section id="section3" class="parallax__item">
<span class="parallax__item__num">03</span>
<h2 class="parallax__item__title">section3</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">자신의 꿈을 이루기 위해 끊임없이 노력하면 언젠가는 반드시 성공할 것이다.</p>
</section>
<!-- //section3 -->
<section id="section4" class="parallax__item">
<span class="parallax__item__num">04</span>
<h2 class="parallax__item__title">section4</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">성공을 위해서는 대담하게 도전해야 합니다. 그리고 실패에 대해서는 당당하게 인정해야 합니다.</p>
</section>
<!-- //section4 -->
<section id="section5" class="parallax__item">
<span class="parallax__item__num">05</span>
<h2 class="parallax__item__title">section5</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">가장 어두운 밤이 지나면 해는 떠오른다.</p>
</section>
<!-- //section5 -->
<section id="section6" class="parallax__item">
<span class="parallax__item__num">06</span>
<h2 class="parallax__item__title">section6</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">성공의 비밀은 한 가지 비밀이 아니다. 그것은 단순한 노력, 인내와 굳은 의지의 결합이다.</p>
</section>
<!-- //section6 -->
<section id="section7" class="parallax__item">
<span class="parallax__item__num">07</span>
<h2 class="parallax__item__title">section7</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">당신이 세상을 바꾸려면 먼저 스스로 바뀌어야 합니다.</p>
</section>
<!-- //section7 -->
<section id="section8" class="parallax__item">
<span class="parallax__item__num">08</span>
<h2 class="parallax__item__title">section8</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">성공하기 위해서는 먼저 불가능하다고 생각했던 일을 가능하게 만들어야 합니다.</p>
</section>
<!-- //section8 -->
<section id="section9" class="parallax__item">
<span class="parallax__item__num">09</span>
<h2 class="parallax__item__title">section9</h2>
<figure class="parallax__item__imgWrap">
<div class="parallax__item__img"></div>
</figure>
<p class="parallax__item__desc">당신이 바라는 것을 이루기 위해 필요한 것은 당신이 가진 것을 최대한 활용하는 것입니다.</p>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:1346zany@gmail.com">1346zany@gmail.com</a>
</footer>
<!-- //footer -->
</body>
</html>CSS
.parallax__wrap > section .parallax__item__num {
opacity: 0;
transform: translateY(200px);
transition: all 0.6s 0.1s cubic-bezier(0, 0.49, 0.25,1);
}
.parallax__wrap > section .parallax__item__title {
opacity: 0;
transform: translateX(-100px);
transition: all 0.6s 0.3s cubic-bezier(0, 0.49, 0.25,1);
}
.parallax__wrap > section .parallax__item__imgWrap {
opacity: 0;
transform: translateY(200px) rotate(30deg) skew(20deg);
transition: all 0.6s 0.6s cubic-bezier(0, 0.49, 0.25,1);
}
.parallax__wrap > section .parallax__item__desc {
opacity: 0;
transform: translateX(-200px);
transition: all 0.6s 0.9s cubic-bezier(0, 0.49, 0.25,1);
}
.parallax__wrap > section:nth-child(even) .parallax__item__title {
transform: translateX(100px);
}
.parallax__wrap > section:nth-child(even) .parallax__item__desc {
transform: translateX(200px);
}
.parallax__wrap > section.show .parallax__item__num {
transform: translateY(0);
opacity: 0.07;
}
.parallax__wrap > section.show .parallax__item__title {
transform: translateX(0);
opacity: 1;
}
.parallax__wrap > section.show .parallax__item__imgWrap {
transform: translateY(0);
opacity: 1;
}
.parallax__wrap > section.show .parallax__item__desc {
transform: translateX(0);
opacity: 1;
}전환(transition)과 애니메이션을 사용하여 패럴랙스 효과를 생성합니다.
SCRIPT
<script>
function scroll(){
let scrollTop = window.pageYOffset || window.scrollY;
document.querySelectorAll(".parallax__item").forEach(item => {
if(scrollTop > item.offsetTop - window.innerHeight/2){
item.classList.add("show");
}
})
requestAnimationFrame(scroll);
}
scroll();
</script>function scroll() 함수: 이 함수는 스크롤 이벤트가 발생할 때 실행되며, 페이지의 스크롤 위치를 확인하고 요소에 "show" 클래스를 추가하는 역할을 합니다.
let scrollTop = window.pageYOffset || window.scrollY;: scrollTop 변수를 선언하고, 현재 스크롤 위치를 저장합니다. window.pageYOffset 속성은 뷰포트의 맨 위에서부터 페이지의 상단까지의 수직 스크롤 거리를 나타내며, window.scrollY는 pageYOffset 속성의 호환성을 위한 대체 속성입니다
document.querySelectorAll(".parallax__item").forEach(item => {...}): CSS 클래스 이름이 "parallax__item"인 모든 요소를 선택합니다. 선택된 각 요소에 대해 반복문을 실행합니다
if(scrollTop > item.offsetTop - window.innerHeight/2) {...}: 현재 스크롤 위치가 선택한 요소의 위치에서 뷰포트의 절반(높이의 절반)만큼 아래에 있는지 확인합니다. 이 조건이 참이면 다음 코드를 실행합니다
item.classList.add("show");: 선택한 요소에 "show" 클래스를 추가합니다. "show" 클래스는 CSS 스타일에서 섹션을 나타내는데 사용되며, 스크롤에 따라 요소가 나타날 때 사용됩니다
requestAnimationFrame(scroll);: scroll() 함수를 다시 호출하여 스크롤 이벤트가 발생할 때마다 업데이트되도록 합니다. requestAnimationFrame은 브라우저에게 애니메이션을 수행하기 전에 다음 리페인트 전에 해당 함수를 호출하도록 요청하는 메서드입니다. 이렇게 함으로써 부드러운 스크롤 효과를 얻을 수 있습니다