Parallax Effect

scrollTop() : 0

section1 offset() 0
section2 offset() 0
section3 offset() 0
section4 offset() 0
section5 offset() 0
section6 offset() 0
section7 offset() 0
section8 offset() 0
section9 offset() 0

Section1

Be true to thyself.

Section2

Attitude is everything.

Section3

It hurt because it mattered.

Section4

Sometimes the right path is not the easiest one.

Section5

Yesterday you said tomorrow. Just do it.

Section6

Happiness depends upon ourselves.

Section7

Faith makes all things possible.

Section8

Time you enjoy wasting is not wasted time.

Section9

Don’t dream it, be it.

<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>  <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>  <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 img1"></div> </figure> <p class="desc color2">Be true to thyself.</p> </section>  <section id="section2" class="content-item"> <span class="num">02</span> <h2 class="title">Section2</h2> <figure class="img-Wrap"> <div class="img img1"></div> </figure> <p class="desc color2">Attitude is everything.</p> </section>  <section id="section3" class="content-item"> <span class="num">03</span> <h2 class="title">Section3</h2> <figure class="img-Wrap"> <div class="img img1"></div> </figure> <p class="desc color2">It hurt because it mattered.</p> </section>  <section id="section4" class="content-item"> <span class="num">04</span> <h2 class="title">Section4</h2> <figure class="img-Wrap"> <div class="img img1"></div> </figure> <p class="desc color2">Sometimes the right path is not the easiest one.</p> </section>  <section id="section5" class="content-item"> <span class="num">05</span> <h2 class="title">Section5</h2> <figure class="img-Wrap"> <div class="img img1"></div> </figure> <p class="desc color2">Yesterday you said tomorrow. Just do it.</p> </section>  <section id="section6" class="content-item"> <span class="num">06</span> <h2 class="title">Section6</h2> <figure class="img-Wrap"> <div class="img img1"></div> </figure> <p class="desc color2">Happiness depends upon ourselves.</p> </section>  <section id="section7" class="content-item"> <span class="num">07</span> <h2 class="title">Section7</h2> <figure class="img-Wrap"> <div class="img img1"></div> </figure> <p class="desc color2">Faith makes all things possible.</p> </section>  <section id="section8" class="content-item"> <span class="num">08</span> <h2 class="title">Section8</h2> <figure class="img-Wrap"> <div class="img img1"></div> </figure> <p class="desc color2">Time you enjoy wasting is not wasted time.</p> </section>  <section id="section9" class="content-item"> <span class="num">09</span> <h2 class="title">Section9</h2> <figure class="img-Wrap"> <div class="img img1"></div> </figure> <p class="desc color2">Don’t dream it, be it.</p> </section>  </div>  </main>

.parallax { background: #222; color: #fff; font-family: 'NEXONLv1Gothic'; } .paraScroll { position: fixed; left: 20px; bottom: 20px; z-index: 1000; background: rgba(0, 0, 0, 0.4); color: #fff; height: 40px; line-height: 40px; border-radius: 50px; text-align: center; font-size: 12px; padding: 0px 20px 2px; } .paraInfo2 { position: fixed; left: 20px; bottom: 70px; z-index: 1000; background: rgba(0, 0, 0, 0.4); color: #fff; padding: 20px; font-size: 12px; line-height: 1.8; border-radius: 10px; } .paraInfo2 li { list-style: none; } .paraNav { position: fixed; right: 20px; top: 20px; z-index: 1000; background: rgba(0, 0, 0, 0.4); padding: 15px 20px; border-radius: 50px; } .paraNav li { display: inline-block; list-style: none; } .paraNav li a { color: #fff; text-decoration: none; display: inline-block; padding: 5px; width: 30px; height: 30px; text-align: center; line-height: 30px; } .paraNav li.active a { background: #fff; color: #000; border-radius: 50%; } .paraInfo { padding: 20px; } .paraInfo h1 { display: inline-block; font-size: 20px; border-bottom: 1px dashed #fff; margin-bottom: 8px; font-weight: 400; } .paraInfo h1 a { color: #fff; text-decoration: none; } .paraInfo p { font-size: 14px; line-height: 1.8; } .paraCont { width: 100%; overflow: hidden; } .paraCont .content-item { width: 1000px; max-width: 70vw; margin: 30vw 0; padding-top: 10vw; text-align: right; position: relative; } .paraCont .content-item .num { font-family: 'Lato'; font-weight: 100; font-size: 25vw; opacity: 0.07; position: absolute; right: -5vw; top: -10vw; } .paraCont .content-item .title { padding-bottom: 10px; font-weight: 700; } .paraCont .content-item .img-Wrap { width: 100%; padding-bottom: 56%; background: #000; position: relative; } .paraCont .content-item .img-Wrap .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; -webkit-filter: saturate(0%); filter: saturate(0%); -webkit-transition: all 1s; transition: all 1s; } .paraCont .content-item .img-Wrap .img:hover { -webkit-filter: saturate(100%); filter: saturate(100%); } .paraCont .content-item .img-Wrap .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; -webkit-filter: saturate(0%); filter: saturate(0%); -webkit-transition: all 1s; transition: all 1s; } .paraCont .content-item .img-Wrap .img:hover { -webkit-filter: saturate(100%); filter: saturate(100%); } .paraCont .content-item .desc { font-size: 6vw; line-height: 1.4; margin-top: -6vw; margin-right: -3vw; position: relative; z-index: 100; word-break: keep-all; color: #F0F600; } .paraCont .content-item:nth-child(even) { margin-left: auto; text-align: left; } .paraCont .content-item:nth-child(even) .num { right: auto; left: -5vw; } .paraCont .content-item:nth-child(even) .desc { margin-right: auto; margin-left: -3vw; } .content-item:nth-child(1) .img { background-image: url(../img/bg1.jpg); } .content-item:nth-child(2) .img { background-image: url(../img/bg2.jpg); } .content-item:nth-child(3) .img { background-image: url(../img/bg3.jpg); } .content-item:nth-child(4) .img { background-image: url(../img/bg4.jpg); } .content-item:nth-child(5) .img { background-image: url(../img/bg5.jpg); } .content-item:nth-child(6) .img { background-image: url(../img/bg6.jpg); } .content-item:nth-child(7) .img { background-image: url(../img/bg7.jpg); } .content-item:nth-child(8) .img { background-image: url(../img/bg8.jpg); } .content-item:nth-child(9) .img { background-image: url(../img/bg9.jpg); } .content-item:nth-child(1) .img-jq { background-image: url(../img/bg11.jpg); } .content-item:nth-child(2) .img-jq { background-image: url(../img/bg12.jpg); } .content-item:nth-child(3) .img-jq { background-image: url(../img/bg13.jpg); } .content-item:nth-child(4) .img-jq { background-image: url(../img/bg14.jpg); } .content-item:nth-child(5) .img-jq { background-image: url(../img/bg15.jpg); } .content-item:nth-child(6) .img-jq { background-image: url(../img/bg16.jpg); } .content-item:nth-child(7) .img-jq { background-image: url(../img/bg17.jpg); } .content-item:nth-child(8) .img-jq { background-image: url(../img/bg18.jpg); } .content-item:nth-child(9) .img-jq { background-image: url(../img/bg19.jpg); }

$(".paraNav ul li").click(function(e){ e.preventDefault(); let target = $(this); let index = target.index(); let section = $(".paraCont > section").eq(index); let offset = section.offset().top; $("html, body").animate({ scrollTop: offset }, 600); }); $(window).scroll(function(){ let scrollTop = $(window).scrollTop(); if(scrollTop >= $(".paraCont > section").eq(0).offset().top - 2){ $(".paraNav ul li").eq(0).addClass("active").siblings().removeClass("active"); } if(scrollTop >= $(".paraCont > section").eq(1).offset().top - 2){ $(".paraNav ul li").eq(1).addClass("active").siblings().removeClass("active"); } if(scrollTop >= $(".paraCont > section").eq(2).offset().top - 2){ $(".paraNav ul li").eq(2).addClass("active").siblings().removeClass("active"); } if(scrollTop >= $(".paraCont > section").eq(3).offset().top - 2){ $(".paraNav ul li").eq(3).addClass("active").siblings().removeClass("active"); } if(scrollTop >= $(".paraCont > section").eq(4).offset().top - 2){ $(".paraNav ul li").eq(4).addClass("active").siblings().removeClass("active"); } if(scrollTop >= $(".paraCont > section").eq(5).offset().top - 2){ $(".paraNav ul li").eq(5).addClass("active").siblings().removeClass("active"); } if(scrollTop >= $(".paraCont > section").eq(6).offset().top - 2){ $(".paraNav ul li").eq(6).addClass("active").siblings().removeClass("active"); } if(scrollTop >= $(".paraCont > section").eq(7).offset().top - 2){ $(".paraNav ul li").eq(7).addClass("active").siblings().removeClass("active"); } if(scrollTop >= $(".paraCont > section").eq(8).offset().top - 2){ $(".paraNav ul li").eq(8).addClass("active").siblings().removeClass("active"); } //info $(".paraScroll span").text(parseInt(scrollTop) + "px"); $(".offset1").text(parseInt($("#section1").offset().top) + "px"); $(".offset2").text(parseInt($("#section2").offset().top) + "px"); $(".offset3").text(parseInt($("#section3").offset().top) + "px"); $(".offset4").text(parseInt($("#section4").offset().top) + "px"); $(".offset5").text(parseInt($("#section5").offset().top) + "px"); $(".offset6").text(parseInt($("#section6").offset().top) + "px"); $(".offset7").text(parseInt($("#section7").offset().top) + "px"); $(".offset8").text(parseInt($("#section8").offset().top) + "px"); $(".offset9").text(parseInt($("#section9").offset().top) + "px"); });