패랠랙스 스크로링 효과 - 리빌 효과
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 img3"></div>
</figure>
<p class="desc reveal" data-delay="500"><span>Be true to thyself.</span></p>
</section>
<!-- //section1 -->
<section id="section2" class="content-item">
<span class="num">02</span>
<h2 class="title">Section2</h2>
<figure class="img-Wrap reveal reveal-RTL">
<div class="img img3"></div>
</figure>
<p class="desc reveal reveal-RTL" data-delay="500"><span>Attitude is everything.</span></p>
</section>
<!-- //section2 -->
<section id="section3" class="content-item">
<span class="num">03</span>
<h2 class="title">Section3</h2>
<figure class="img-Wrap reveal reveal-TTB">
<div class="img img3"></div>
</figure>
<p class="desc reveal reveal-TTB" data-delay="500"><span>It hurt because it mattered.</span></p>
</section>
<!-- //section3 -->
<section id="section4" class="content-item">
<span class="num">04</span>
<h2 class="title">Section4</h2>
<figure class="img-Wrap reveal reveal-BTT">
<div class="img img3"></div>
</figure>
<p class="desc reveal reveal-BTT" data-delay="500"><span>Sometimes the right path is not the easiest one.</span></p>
</section>
<!-- //section4 -->
<section id="section5" class="content-item">
<span class="num">05</span>
<h2 class="title">Section5</h2>
<figure class="img-Wrap reveal reveal-two">
<div class="img img3"></div>
</figure>
<p class="desc reveal reveal-two" data-delay="500"><span>Yesterday you said tomorrow. Just do it.</span></p>
</section>
<!-- //section5 -->
<section id="section6" class="content-item">
<span class="num">06</span>
<h2 class="title">Section6</h2>
<figure class="img-Wrap reveal reveal-two reveal-RTL">
<div class="img img3"></div>
</figure>
<p class="desc reveal reveal-two reveal-RTL" data-delay="500"><span>Happiness depends upon ourselves.</span></p>
</section>
<!-- //section6 -->
<section id="section7" class="content-item">
<span class="num">07</span>
<h2 class="title">Section7</h2>
<figure class="img-Wrap reveal reveal-two reveal-TTB">
<div class="img img3"></div>
</figure>
<p class="desc reveal reveal-two reveal-BTT" data-delay="500"><span>Faith makes all things possible.</span></p>
</section>
<!-- //section7 -->
<section id="section8" class="content-item">
<span class="num">08</span>
<h2 class="title">Section8</h2>
<figure class="img-Wrap reveal reveal-two reveal-BTT">
<div class="img img3"></div>
</figure>
<p class="desc reveal reveal-two reveal-TTB" data-delay="500"><span>Time you enjoy wasting is not wasted time.</span></p>
</section>
<!-- //section8 -->
<section id="section9" class="content-item">
<span class="num">09</span>
<h2 class="title">Section9</h2>
<figure class="img-Wrap reveal reveal-two">
<div class="img img3"></div>
</figure>
<p class="desc reveal reveal-two" data-delay="500"><span>Don’t dream it, be it.</span></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(226, 27, 103);
}
/* 기본값 */
.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%;}
}
$(".paraNav ul li").click(function(e){
e.preventDefault();
let target = $(this);
let index = target.index();
let section = $(".content-item").eq(index);
let offset = section.offset().top;
$("html, body").animate({scrollTop: offset}, 600);
});
$(window).scroll(function(){
let scrollTop = $(this).scrollTop();
// reveal 기본효과
// $(".reveal").each(function(){
// if((scrollTop + $(window).height()) >= $(this).offset().top){
// $(this).addClass("show");
// }
// });
// reveal 시간차
$(".reveal").each(function(){
if((scrollTop + $(window).height()) >= $(this).offset().top){
$(this).delay($(this).data("delay")).queue(function(){
$(this).addClass("show");
});
// console.log($(this).data("delay"));
};
});
// 메뉴
$(".content-item").each(function(i){
if(scrollTop > $(".content-item").eq(i).offset().top -2){
$(".paraNav ul li").eq(i).addClass("active").siblings().removeClass("active");
}
});
// 출력용
$(".paraScroll span").text(scrollTop);
});
//source
modalPE01();