소개
안녕하세요!. 웹스토리보이입니다. 가장 기본적인 패럴랙스 스크롤링 이펙트 메뉴 이동을 만들어 보겠습니다. 쉬우니까 잘 따라해보세요~
-
parallax
- 01_parallax01
- 02_parallax02
- 03_parallax03
- 04_parallax04
- 05_parallax05
- 06_parallax06
- parallax06_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 {
background-color: #222;
color: #fff;
font-family: "NexonLv1Gothic";
font-weight: 300;
}
#parallax__title {
padding: 20px;
}
#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 {
max-width: 1600px;
width: 98%;
margin: 0 auto;
/* background-color: rgba(255,255,255,0.1); */
}
.content__item {
width: 1000px;
max-width: 70vw;
margin: 30vw auto;
/* background-color: rgba(255,255,255,0.3); */
text-align: left;
margin-right: 0;
position: relative;
padding-top: 15vw;
}
.content__item:nth-child(even) {
margin-left: 0;
text-align: right;
}
.content__item__num {
font-size: 35vw;
position: absolute;
left: -5vw;
top: -13vw;
opacity: 0.07;
font-family: "Lato";
font-weight: 100;
}
.content__item:nth-child(even) .content__item__num {
left: auto;
right: -5vw;
}
.content__item__title {
padding-bottom: 5px;
font-weight: 400;
}
.content__item__imgWrap {
width: 100%;
padding-bottom: 56.25%;
background: #000;
position: relative;
overflow: hidden;
}
.content__item__img {
position: absolute;
left: -5%;
top: -5%;
width: 110%;
height: 110%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
filter: saturate(0%);
/* transition: transform 0.33s linear; */
}
.content__item__img:hover {
filter: saturate(100%);
/* transform: scale(1.025); */
}
.content__item:nth-child(1) .content__item__img {
background-image: url(https://webstoryboy.github.io/web2022/webs_img/para_images01@2.jpg);
}
.content__item:nth-child(2) .content__item__img {
background-image: url(https://webstoryboy.github.io/web2022/webs_img/para_images02@2.jpg);
}
.content__item:nth-child(3) .content__item__img {
background-image: url(https://webstoryboy.github.io/web2022/webs_img/para_images03@2.jpg);
}
.content__item:nth-child(4) .content__item__img {
background-image: url(https://webstoryboy.github.io/web2022/webs_img/para_images04@2.jpg);
}
.content__item:nth-child(5) .content__item__img {
background-image: url(https://webstoryboy.github.io/web2022/webs_img/para_images05@2.jpg);
}
.content__item:nth-child(6) .content__item__img {
background-image: url(https://webstoryboy.github.io/web2022/webs_img/para_images06@2.jpg);
}
.content__item:nth-child(7) .content__item__img {
background-image: url(https://webstoryboy.github.io/web2022/webs_img/para_images07@2.jpg);
}
.content__item:nth-child(8) .content__item__img {
background-image: url(https://webstoryboy.github.io/web2022/webs_img/para_images08@2.jpg);
}
.content__item:nth-child(9) .content__item__img {
background-image: url(https://webstoryboy.github.io/web2022/webs_img/para_images09@2.jpg);
}
.content__item__desc {
font-size: 4vw;
line-height: 1.4;
margin-top: -5vw;
margin-left: -4vw;
z-index: 100;
position: relative;
word-break: keep-all;
}
.content__item:nth-child(even) .content__item__desc {
margin-left: auto;
margin-right: -4vw;
}
/* option */
/* 한번에 나타나기 */
/* .content__item__desc span {
opacity: 0;
transition: all 0.33s ease-in-out;
}
.content__item__desc span:nth-child(1) {transition-delay: 0.1s;}
.content__item__desc span:nth-child(2) {transition-delay: 0.2s;}
.content__item__desc span:nth-child(3) {transition-delay: 0.3s;}
.content__item__desc span:nth-child(4) {transition-delay: 0.4s;}
.content__item__desc span:nth-child(5) {transition-delay: 0.5s;}
.content__item__desc span:nth-child(6) {transition-delay: 0.6s;}
.content__item__desc span:nth-child(7) {transition-delay: 0.7s;}
.content__item__desc span:nth-child(8) {transition-delay: 0.8s;}
.content__item__desc span:nth-child(9) {transition-delay: 0.9s;}
.content__item__desc span:nth-child(10) {transition-delay: 1.0s;}
.content__item__desc span:nth-child(11) {transition-delay: 1.1s;}
.content__item__desc span:nth-child(12) {transition-delay: 1.2s;}
.content__item__desc span:nth-child(13) {transition-delay: 1.3s;}
.content__item__desc span:nth-child(14) {transition-delay: 1.4s;}
.content__item__desc span:nth-child(15) {transition-delay: 1.5s;}
.content__item__desc span:nth-child(16) {transition-delay: 1.6s;}
.content__item__desc span:nth-child(17) {transition-delay: 1.7s;}
.content__item__desc span:nth-child(18) {transition-delay: 1.8s;}
.content__item__desc span:nth-child(19) {transition-delay: 1.9s;}
.content__item__desc span:nth-child(20) {transition-delay: 2.0s;}
.content__item__desc.show span:nth-child(1) {opacity: 1;}
.content__item__desc.show span:nth-child(2) {opacity: 1;}
.content__item__desc.show span:nth-child(3) {opacity: 1;}
.content__item__desc.show span:nth-child(4) {opacity: 1;}
.content__item__desc.show span:nth-child(5) {opacity: 1;}
.content__item__desc.show span:nth-child(6) {opacity: 1;}
.content__item__desc.show span:nth-child(7) {opacity: 1;}
.content__item__desc.show span:nth-child(8) {opacity: 1;}
.content__item__desc.show span:nth-child(9) {opacity: 1;}
.content__item__desc.show span:nth-child(10) {opacity: 1;}
.content__item__desc.show span:nth-child(11) {opacity: 1;}
.content__item__desc.show span:nth-child(12) {opacity: 1;}
.content__item__desc.show span:nth-child(13) {opacity: 1;}
.content__item__desc.show span:nth-child(14) {opacity: 1;}
.content__item__desc.show span:nth-child(15) {opacity: 1;}
.content__item__desc.show span:nth-child(16) {opacity: 1;}
.content__item__desc.show span:nth-child(17) {opacity: 1;}
.content__item__desc.show span:nth-child(18) {opacity: 1;}
.content__item__desc.show span:nth-child(19) {opacity: 1;}
.content__item__desc.show span:nth-child(20) {opacity: 1;} */
/* section1 */
#section1 .content__item__desc span {
opacity: 0;
min-width: 1.4vw;
transition: all 0.33s ease-in-out;
}
#section1 .content__item__desc span.show {
opacity: 1;
}
/* section2 */
#section2 .content__item__desc span {
opacity: 0;
display: inline-block;
min-width: 1.4vw;
transform: translateY(70px);
transition: all 0.33s cubic-bezier(0, 0.52, 0.58, 1);
}
#section2 .content__item__desc span.show {
opacity: 1;
transform: translateY(0);
}
/* section3 */
#section3 .content__item__desc span {
display: inline-block;
min-width: 1.4vw;
opacity: 0;
}
#section3 .content__item__desc span.show {
opacity: 1;
animation: tada 0.3s;
}
@keyframes tada {
0% {transform: scaleX(1)}
10%, 20% {transform: scale3d(.9, .9, .9) rotate(-3deg)}
30%, 50%, 70%, 90% {transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)}
40%, 60%, 80% {transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)}
100% {transform: scaleX(1)}
}
/* section4 */
#section4 .content__item__desc span {
display: inline-block;
min-width: 1.4vw;
opacity: 0;
}
#section4 .content__item__desc span.show {
opacity: 1;
animation: rubberBand 1s;
}
@keyframes rubberBand {
0% {
opacity: 0;
transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
60% {
opacity: 1;
transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
}
}
</style>
</head>
<body>
<header id="parallax__title">
<h1><a href="parallaxEffect.html">JavaScript Parallax Effect06</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 class="active"><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><a href="parallax_result09.html">9</a></li>
</ul>
</header>
<!-- //parallax__title -->
<main id="parallax__cont">
<div id="contents">
<section id="section1" class="content__item">
<span class="content__item__num">01</span>
<h2 class="content__item__title">Section1</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">높은 목표를 세우고, 스스로 채찍질 한다.</p>
</section>
<!-- //section1 -->
<section id="section2" class="content__item">
<span class="content__item__num">02</span>
<h2 class="content__item__title">Section2</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
</section>
<!-- //section2 -->
<section id="section3" class="content__item">
<span class="content__item__num">03</span>
<h2 class="content__item__title">Section3</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">매 순간에 최선을 다하고, 끊임없이 변화한다.</p>
</section>
<!-- //section3 -->
<section id="section4" class="content__item">
<span class="content__item__num">04</span>
<h2 class="content__item__title">Section4</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">모든 일에는 기본을 중요하게 생각한다.</p>
</section>
<!-- //section4 -->
<section id="section5" class="content__item">
<span class="content__item__num">05</span>
<h2 class="content__item__title">Section5</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">열정을 잃지 않고 실패에서 실패로 걸어가는 것이 성공이다.</p>
</section>
<!-- //section5 -->
<section id="section6" class="content__item">
<span class="content__item__num">06</span>
<h2 class="content__item__title">Section6</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">천 마디 말보단 하나의 행동이 더 값지다.</p>
</section>
<!-- //section6 -->
<section id="section7" class="content__item">
<span class="content__item__num">07</span>
<h2 class="content__item__title">Section7</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">조그만 성공에 만족하지 않으며, 방심을 경계한다.</p>
</section>
<!-- //section7 -->
<section id="section8" class="content__item">
<span class="content__item__num">08</span>
<h2 class="content__item__title">Section8</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">나는 내가 더 노력할수록 운이 더 좋아진다는 걸 발견했다</p>
</section>
<!-- //section8 -->
<section id="section9" class="content__item">
<span class="content__item__num">09</span>
<h2 class="content__item__title">Section9</h2>
<figure class="content__item__imgWrap">
<div class="content__item__img"></div>
</figure>
<p class="content__item__desc">꿈이 있다면, 그 꿈을 잡고 절대 놓아주지마라.</p>
</section>
<!-- //section9 -->
</div>
</main>
<!-- //parallax__cont -->
<script>
//글씨 쪼개기
// let text = document.querySelector("#section1 .content__item__desc");
// let splitText = text.innerText;
// let splitWrap = splitText.split('').join("</span><span>");
// splitWrap = "<span>" + splitWrap + "</span>";
// text.innerHTML = splitWrap;
//여러개 글씨 쪼개기
document.querySelectorAll(".content__item__desc").forEach(desc => {
let splitText = desc.innerText;
let splitWrap = splitText.split('').join("</span><span aria-hidden='true'>");
splitWrap = "<span aria-hidden='true'>" + splitWrap + "</span>";
desc.innerHTML = splitWrap;
desc.setAttribute("aria-label", splitText);
})
function scroll(){
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
// document.querySelectorAll(".content__item").forEach(item => {
// if(scrollTop >= item.offsetTop){
// item.querySelector(".content__item__desc").classList.add("show");
// }
// })
document.querySelectorAll(".content__item").forEach(item => {
if(scrollTop > item.offsetTop){
item.querySelectorAll(".content__item__desc span").forEach((span, index) => {
setTimeout(() => {
span.classList.add("show");
}, 50 * (index+1))
})
}
})
requestAnimationFrame(scroll);
}
scroll();
</script>
</body>
</html>
view2
view3
view4
참고
728x90
