패랠랙스 스크로링 효과 - 리빌 효과
Be true to thyself.
Attitude is everything.
It hurt because it mattered.
Sometimes the right path is not the easiest one.
Yesterday you said tomorrow. Just do it.
Happiness depends upon ourselves.
Faith makes all things possible.
Time you enjoy wasting is not wasted time.
Don’t dream it, be it.
<main>
<div class="paraScroll">scrollTop() : <span>0</span>px</div>
<!-- //paraScroll -->
<nav 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>
</nav>
<!-- //paraNav -->
<div class="paraCont">
<section id="section1" class="content-item">
<span class="num">01</span>
<h2 class="title">Section1</h2>
<figure class="img-Wrap reveal">
<div class="img"></div>
</figure>
<p class="desc">Be true to thyself.</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">Attitude is everything.</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">It hurt because it mattered.</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">Sometimes the right path is not the easiest one.</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">Yesterday you said tomorrow. Just do it.</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">Happiness depends upon ourselves.</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">Faith makes all things possible.</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">Time you enjoy wasting is not wasted time.</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">Don’t dream it, be it.</p>
</section>
<!-- //section9 -->
</div>
<!-- //paraCont -->
</main>
.paraNav {
top: 20px;
transition: top 0.4s ease;
}
.paraNav.hide {
top: -200px;
}
.paraNav li a {
width: 30px;
height: 30px;
padding: 5px;
}
.paraNav li.active a {
border-radius: 30px;
}
/* bg */
.paraCont .content-item .img-Wrap {
background: transparent;
}
/* reveal */
.reveal > div,
.reveal > span {
opacity: 0;
}
.reveal.show > div,
.reveal.show > span {
animation: opacity 1000ms 200ms linear forwards;
}
.reveal {
position: relative;
}
.reveal::before {
content: '';
position: absolute;
right: 0; top: 0;
width: 0;
height: 100%;
z-index: 100;
/* background: #fff; */
/* 속기형 속성 - 글씨, 이미지 등등 사용가능 그런경우 다른곳에서 안먹힌다. */
background-color: #fff;
/* 속기형 속성이 안먹힌다. */
}
.reveal.reveal-two::after {
content: '';
position: absolute;
right: 0; top: 0;
width: 0;
height: 100%;
z-index: 100;
background-color: rgb(63, 27, 226);
}
/* 기본값 */
.reveal.show::before {
animation: reveal 1000ms cubic-bezier(0.77, 0, 0.18, 1);
}
.reveal.reveal-RTL.show::before {
animation: reveal-RTL 1000ms cubic-bezier(0.77, 0, 0.18, 1);
}
.reveal.reveal-TTB.show::before {
animation: reveal-TTB 1000ms cubic-bezier(0.77, 0, 0.18, 1);
}
.reveal.reveal-BTT.show::before {
animation: reveal-BTT 1000ms cubic-bezier(0.77, 0, 0.18, 1);
}
/* 두가지 */
.reveal.show::after {
animation: reveal 1000ms 300ms cubic-bezier(0.77, 0, 0.18, 1);
}
.reveal.reveal-RTL.show::after {
animation: reveal-RTL 1000ms 300ms cubic-bezier(0.77, 0, 0.18, 1);
}
.reveal.reveal-TTB.show::before {
animation: reveal-TTB 1000ms 300ms cubic-bezier(0.77, 0, 0.18, 1);
}
.reveal.reveal-BTT.show::before {
animation: reveal-BTT 1000ms 300ms cubic-bezier(0.77, 0, 0.18, 1);
}
@keyframes opacity {
0% {opacity: 0;}
60% {opacity: 0;}
70% {opacity: 1;}
100% {opacity: 1;}
}
@keyframes reveal {
0% {width: 0; left: 0;}
50% {width: 100%; left: 0;}
80% {width: 100%; left: 0;}
100% {width: 0; left: 100%;}
}
@keyframes reveal-RTL {
0% {width: 0; right: 0;}
50% {width: 100%; right: 0;}
80% {width: 100%; right: 0;}
100% {width: 0; right: 100%;}
}
@keyframes reveal-TTB {
0% {width: 100%; height: 0; top: 0;}
50% {width: 100%; height: 100%; top: 0;}
80% {width: 100%; height: 100%; top: 0;}
100% {width: 100%; height: 0; top: 100%;}
}
@keyframes reveal-BTT {
0% {width: 100%; height: 0; top: auto; bottom: 0;}
50% {width: 100%; height: 100%; top: auto; bottom: 0;}
80% {width: 100%; height: 100%; top: auto; bottom: 0;}
100% {width: 100%; height: 0; top: auto; bottom: 100%;}
}
const scrollReveal = function(){
let scrollTop = (window.pageYOffset || document.documentElement.scrollTop || window.scrollY) + (window.innerHeight);
const reveal = document.querySelectorAll(".reveal");
reveal.forEach(element => {
let offsetTop = element.offsetTop + element.parentElement.offsetTop;
let revealData = element.dataset.delay;
if(scrollTop >= offsetTop){
if(revealData == undefined){
element.classList.add("show");
} else {
setTimeout(() => {
element.classList.add("show");
}, revealData);
}
}
});
// 메뉴
document.querySelectorAll(".content-item").forEach((item, index) => {
if(scrollTop > item.offsetTop -2 ){
document.querySelectorAll(".paraNav ul li").forEach((li) => {
li.classList.remove("active");
});
document.querySelector(".paraNav ul li:nth-child("+(index+1)+")").classList.add("active");
};
});
// 출력문
document.querySelector(".paraScroll span").innerText = parseInt(scrollTop);
};
window.addEventListener("scroll", scrollReveal);
//source
modalPE01();