Parallax Effect

ScrollTop() : 0px

Section1

이 세상에는 하나의 괴물이 있다. 그것은 바로 게으름이다. - 토마스 칼라일

Section2

오늘 할 수 있는 일을 내일로 미루지 말라. - 벤자민 프랭클린

Section3

게으른 두뇌는 악마의 공장이다. - 영국 속담

Section4

모든 죄악의 근본은 조바심과 게으름이다. - 카프카

Section5

게으를 때는 게으름을 알지 못한다. - 하루히 센안

Section6

게으름은 마귀의 배게다. - 네덜란드 속담

Section7

근면은 행운의 어머니이다. - 이탈리아 속담

Section8

근면과 성실이 있으면 불가능한 일은 거의 없다. - 존슨

Section9

사용하지 않는 철은 곧 녹슬어 버린다. - 포르투갈 속담

<!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 class="paraInfo"> <h1><a href="index.html">Parallax Effect01 - javascript</a></h1> <p>패랠랙스 스크로링 효과 - 메뉴 이동</p> </header>   <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  <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>  </div>  </main>   <footer class="paraFooter"> </footer>   <div class="source"> <button onclick="modal()">소스보기</button> </div>  </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; }

$(".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 }, 1200); }); $(window).scroll(function(){ let scrollTop = $(window).scrollTop(); // let offset1 = scrollTop - $(“#section1”).offset().top; // let offset2 = scrollTop - $(“#section2").offset().top; // let offset3 = scrollTop - $(“#section3”).offset().top; // let offset4 = scrollTop - $(“#section4").offset().top; // let offset5 = scrollTop - $(“#section5”).offset().top; // let offset6 = scrollTop - $(“#section6").offset().top; // let offset7 = scrollTop - $(“#section7”).offset().top; // let offset8 = scrollTop - $(“#section8").offset().top; // let offset9 = scrollTop - $(“#section9”).offset().top; // $(“#section1").css({transform: “translateX(“+offset1+“px)“}); // $(“#section2”).css({transform: “translateX(“+offset2+“px)“}); // $(“#section3”).css({transform: “translateX(“+offset3+“px)“}); // $(“#section4”).css({transform: “translateX(“+offset4+“px)“}); // $(“#section5”).css({transform: “translateX(“+offset5+“px)“}); // $(“#section6”).css({transform: “translateX(“+offset6+“px)“}); // $(“#section7”).css({transform: “translateX(“+offset7+“px)“}); // $(“#section8”).css({transform: “translateX(“+offset8+“px)“}); // $(“#section9”).css({transform: “translateX(“+offset9+“px)“}); //for문 // for( let i=1; i<=9; i++ ){ // let offset = scrollTop - $(“#section”+i).offset().top; // $(“#section”+i+ ” .desc”).css({transform: “translateX(“+offset+“px)“}); // } //each() $(".content-item").each(function(index){ let offset1 = (scrollTop - $(this).offset().top) * 0.1; let offset2 = (scrollTop - $(this).offset().top) * 0.2; $(this).find(".img").css({transform: "translateY("+ offset2 +"px)"}); $(this).find(".desc").css({transform: "translateY("+ offset1 +"px)"}); //메뉴 if( scrollTop > $(this).offset().top - 2 ){ $(".paraNav ul li").eq(index).addClass("active").siblings().removeClass("active"); } }); //출력 $(".paraScroll span").text(scrollTop); });