parallax

by Kim Ara

HTML

<div class="pimg1">
         <div class="ptext">
            <span class="border">Image 1 Text</span>
         </div>
      </div>

      <section class="section section-light">
         <h2>Section 1</h2>
         <p>test test test test test test test test test test test test test test test test test test test test test
            test test test test test test test test test test test test test test test test test test test</p>
      </section>

      <div class="pimg2">
         <div class="ptext">
            <span class="border">Image 2 Text</span>
         </div>
      </div>

      <section class="section section-dark">
         <h2>Section 2</h2>
         <p>test test test test test test test test test test test test test test test test test test test test test
            test test test test test test test test test test test test test test test test test test test test test
            test test test test test test test test test test test test test test test test test test test</p>
      </section>

      <div class="pimg3">
         <div class="ptext">
            <span class="border">Image 3 Text</span>
         </div>
      </div>

      <section class="section section-dark">
         <h2>Section 3</h2>
         <p>test test test test test test test test test test test test test test test test test test test test test
            test test test test test test test test test test test test test test test test test test test test test
            test test test test test test test test test test test test test test test test test test test test test
            test test test test test test </p>
      </section>

      <div class="pimg1">
         <div class="ptext">
            <span class="border">HI</span>
         </div>
      </div>

CSS

body,html {height:100%;margin:0;font-size:16px;font-family:"Lato", sans-serif;font-weight:400;line-height:1.8em;color:#666}
.pimg1,.pimg2,.pimg3 {position:relative;opacity:0.7;background-position:center;background-size:cover;background-repeat:no-repeat;
   /* fixed = parallax, scroll = normal */background-attachment:fixed;}
.pimg1 {/* background-image로 확실하게 명시해야 함 */background-image:url(https://www.jeep.co.kr/content/dam/cross-regional/apac/jeep/ko_kr/bhp/image-home/1_2880X1000.jpg.img.1440.jpg);min-height:100%;}
.pimg2 {background-image: url(https://www.jeep.co.kr/content/dam/cross-regional/apac/jeep/ko_kr/bhp/image-home/newlimitedx_0308.jpg.img.1440.jpg);min-height:400px;background-attachment:scroll;}
.pimg3 {background-image: url(https://www.jeep.co.kr/content/dam/cross-regional/apac/jeep/ko_kr/bhp/image-home/unrivaled_ilsan_0523_3.jpg.img.1440.jpg);min-height:400px;}
.section{text-align:center;padding:50px 80px}
.section-light{background-color:#f4f4f4;color:#666}
.section-dark{background-color:#282e34;color:#ddd}
.ptext{position:absolute;top:50%;width:100%;text-align:center;color:#000;font-size:27px;letter-spacing:8px;text-transform:uppercase}
.pimg1 .border{background:#fff;color:#444;padding:10px 50px}

JavaScript

if(navigator.userAgent.match(/Trident\/7\./)) {
      $('body').on("mousewheel", function () {
         event.preventDefault();
         var wheelDelta = event.wheelDelta;
         var currentScrollPosition = window.pageYOffset;
         window.scrollTo(0, currentScrollPosition - wheelDelta);
      });
      $('body').keydown(function (e) {
         e.preventDefault(); // prevent the default action (scroll / move caret)
         var currentScrollPosition = window.pageYOffset;
         switch (e.which) {
               case 38: // up
                  window.scrollTo(0, currentScrollPosition - 120);
                  break;
               case 40: // down
                  window.scrollTo(0, currentScrollPosition + 120);
                  break;
               default: return; // exit this handler for other keys
         } 
      });
   }