패랠랙스 텍스트 효과
이 세상에는 하나의 괴물이 있다. 그것은 바로 게으름이다. - 토마스 칼라일
오늘 할 수 있는 일을 내일로 미루지 말라. - 벤자민 프랭클린
게으른 두뇌는 악마의 공장이다. - 영국 속담
모든 죄악의 근본은 조바심과 게으름이다. - 카프카
게으를 때는 게으름을 알지 못한다. - 하루히 센안
게으름은 마귀의 배게다. - 네덜란드 속담
근면은 행운의 어머니이다. - 이탈리아 속담
근면과 성실이 있으면 불가능한 일은 거의 없다. - 존슨
사용하지 않는 철은 곧 녹슬어 버린다. - 포르투갈 속담
<!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>Parallax Effect</title>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/highlight.css">
</head>
<body class="parallax">
<!-- header -->
<header class="paraInfo">
<h1><a href="index.html">Parallax Effect01 - javascript</a></h1>
<p>패랠랙스 스크로링 효과 - 메뉴 이동</p>
</header>
<!-- //header -->
<!-- main -->
<main>
<div class="paraScroll">window.scrollY : <span>0</span></div>
<div class="paraInfo2">
<ul>
<li>section1 offset(): <span class="offset1">0</span></li>
<li>section2 offset(): <span class="offset2">0</span></li>
<li>section3 offset(): <span class="offset3">0</span></li>
<li>section4 offset(): <span class="offset4">0</span></li>
<li>section5 offset(): <span class="offset5">0</span></li>
<li>section6 offset(): <span class="offset6">0</span></li>
<li>section7 offset(): <span class="offset7">0</span></li>
<li>section8 offset(): <span class="offset8">0</span></li>
<li>section9 offset(): <span class="offset9">0</span></li>
</ul>
</div>
<!--//scroll-->
<div class="paraNav">
<ul>
<li class="active"><a href="#section1">s1</a></li>
<li><a href="#section2">s2</a></li>
<li><a href="#section3">s3</a></li>
<li><a href="#section4">s4</a></li>
<li><a href="#section5">s5</a></li>
<li><a href="#section6">s6</a></li>
<li><a href="#section7">s7</a></li>
<li><a href="#section8">s8</a></li>
<li><a href="#section9">s9</a></li>
</ul>
</div>
<!-- //nav -->
<div class="paraCont">
<section id="section1" class="content-item">
<span class="num">01</span>
<h2 class="title">Section1</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">이 세상에는 하나의 괴물이 있다. 그것은 바로 게으름이다. - 토마스 칼라일</p>
</section>
<!-- section1 -->
<section id="section2" class="content-item">
<span class="num">02</span>
<h2 class="title">Section2</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">오늘 할 수 있는 일을 내일로 미루지 말라. - 벤자민 프랭클린</p>
</section>
<!-- section2 -->
<section id="section3" class="content-item">
<span class="num">03</span>
<h2 class="title">Section3</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">게으른 두뇌는 악마의 공장이다. - 영국 속담</p>
</section>
<!-- section3 -->
<section id="section4" class="content-item">
<span class="num">04</span>
<h2 class="title">Section4</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">모든 죄악의 근본은 조바심과 게으름이다. - 카프카</p>
</section>
<!-- section4 -->
<section id="section5" class="content-item">
<span class="num">05</span>
<h2 class="title">Section5</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">게으를 때는 게으름을 알지 못한다. - 하루히 센안</p>
</section>
<!-- section5 -->
<section id="section6" class="content-item">
<span class="num">06</span>
<h2 class="title">Section6</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">게으름은 마귀의 배게다. - 네덜란드 속담</p>
</section>
<!-- section6 -->
<section id="section7" class="content-item">
<span class="num">07</span>
<h2 class="title">Section7</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">근면은 행운의 어머니이다. - 이탈리아 속담</p>
</section>
<!-- section7 -->
<section id="section8" class="content-item">
<span class="num">08</span>
<h2 class="title">Section8</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">근면은 행운의 어머니이다. - 이탈리아 속담</p>
</section>
<!-- section8 -->
<section id="section9" class="content-item">
<span class="num">09</span>
<h2 class="title">Section9</h2>
<figure class="img-Wrap">
<div class="img"></div>
</figure>
<p class="desc">근면과 성실이 있으면 불가능한 일은 거의 없다. - 존슨</p>
</section>
<!-- section9 -->
</div>
<!-- //contents -->
</main>
<!-- //main -->
<!-- footer -->
<footer class="paraFooter">
</footer>
<!-- //footer -->
<!-- source -->
<div class="source">
<button onclick="modal()">소스보기</button>
</div>
<!-- //source -->
</body>
.paraNav {
top: 20px;
transition: top 0.4s ease;
}
.paraNav.hide {
top: -200px;
}
.paraNav li a {
width: auto;
padding: 5px;
width: 30px;
height: 30px;
}
.paraNav li.active a {
border-radius: 30px;
}
/* 한번에 나타나기 */
/* .content-item .desc {
opacity: 0;
transform: translateY(100px) skewX(30deg);
transition: all 0.33s ease-in-out;
}
.content-item .desc.show {
opacity: 1;
transform: translateY(0) skewX(0);
} */
/* 한번에 나타나기 */
/* .content-item .desc span {
display: inline-block;
min-width: 1vw;
opacity: 0;
transform: translateY(100px) skewX(30deg);
transition: all 0.33s ease-in-out;
}
.content-item .desc span.show{
transform: translateY(0) skewX(0);
opacity: 1;
} */
/* GSAP 한 글자씩 나타나기 */
.content-item .desc span {
opacity: 0;
display: inline-block;
min-width: 1vw;
transform: translateY(100px) rotate(90deg) skewX(5deg) scale(2);
}
//modal();
// let text = document.querySelector("#section1 .desc").innerText;
// let split = text.split('').join("");
// split = "" + split +"";
// document.querySelector("#section1 .desc").innerHTML = split;
document.querySelectorAll(".split").forEach(el => {
let text = el.innerText;
let split = text.split('').join(">/span>>span aria-hidden ='true'>");
split = ">span aria-hidden ='true'>" + split + ">/span>";
el.innerHTML = split;
el.setAttribute("aria-label", text);
})
window.addEventListener("scroll", () => {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;
// if ( scrollTop >= document.getElementById("section1").offsetTop - window.innerHeight / 3) {
// document.querySelectorAll("#section1 .split span").forEach((el,index) => {
// setTimeout(() => {
// el.classList.add("show")
// }, 50 * index);
// })
// }
let count = document.querySelectorAll(".content-item");
//for문
// for(let i = 1; i >= count.length; i++) {
// if ( scrollTop >= document.getElementById("section" + i).offsetTop - window.innerHeight / 3) {
// document.querySelectorAll("#section"+ i +" .split span").forEach((el,index) => {
// setTimeout(() => {
// el.classList.add("show")
// }, 50 * index);
// })
// } else {
// document.querySelectorAll("#section"+ i +" .split span").forEach((el,index) => {
// setTimeout(() => {
// el.classList.remove("show")
// }, 50 * index);
// })
// }
// }
//forEach()
// count.forEach((el,index) => {
// if ( scrollTop >= el.offsetTop - window.innerHeight / 3) {
// el.querySelectorAll(".split span").forEach((elem,index) => {
// setTimeout(() => {
// elem.classList.add("show")
// }, 50 * index);
// })
// } else {
// el.querySelectorAll(".split span").forEach((elem,index) => {
// setTimeout(() => {
// elem.classList.remove("show")
// }, 50 * index);
// })
// }
// })
//gsap()
count.forEach((el, index) => {
if (scrollTop >= el.offsetTop - window.innerHeight / 3) {
gsap.to(el.querySelectorAll(".split span"), {
duration: .5,
opacity: 1,
stagger: 0.05,
y: 0,
ease: "power3.out",
rotation: 0,
scale: 1
});
}
})
})