Parallax Effect

window.scrollY() : 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"></div> </figure> <p class="desc">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"></div> </figure> <p class="desc">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"></div> </figure> <p class="desc">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"></div> </figure> <p class="desc">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"></div> </figure> <p class="desc">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"></div> </figure> <p class="desc">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"></div> </figure> <p class="desc">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"></div> </figure> <p class="desc">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"></div> </figure> <p class="desc">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-jq { 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-jq: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); }