<div class="skw-pages">
  <div class="skw-page skw-page-1 active">
    <div class="skw-page__half skw-page__half--left">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
          <h2 class="skw-page__heading">Skewed One Page Scroll</h2>
          <p class="skw-page__description">Just scroll down</p>
        </div>
      </div>
    </div>
  </div>
  <div class="skw-page skw-page-2">
    <div class="skw-page__half skw-page__half--left">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
          <h2 class="skw-page__heading">Page 2</h2>
          <p class="skw-page__description">Nothing to do here, continue scrolling.</p>
        </div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
  </div>
  <div class="skw-page skw-page-3">
    <div class="skw-page__half skw-page__half--left">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
          <h2 class="skw-page__heading">Page 3</h2>
          <p class="skw-page__description">The end is near, I promise!</p>
        </div>
      </div>
    </div>
  </div>
  <div class="skw-page skw-page-4">
    <div class="skw-page__half skw-page__half--left">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
          <h2 class="skw-page__heading">Page 4</h2>
          <p class="skw-page__description">Ok, ok, just one more scroll!</p>
        </div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
  </div>
  <div class="skw-page skw-page-5">
    <div class="skw-page__half skw-page__half--left">
      <div class="skw-page__skewed">
        <div class="skw-page__content"></div>
      </div>
    </div>
    <div class="skw-page__half skw-page__half--right">
      <div class="skw-page__skewed">
        <div class="skw-page__content">
          <h2 class="skw-page__heading">Epic finale</h2>
          <p class="skw-page__description">
            Feel free to check 
            <a class="skw-page__link" href="https://codepen.io/suez/pens/public/" target="_blank">my other pens</a> and follow me on 
            <a class="skw-page__link" href="https://twitter.com/NikolayTalanov" target="_blank">Twitter</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
$openSans: 'Open Sans', Helvetica, Arial, sans-serif;
body {
  background: #15181A;
  font-family: $openSans;
}

.skw-pages {
  overflow: hidden;
  position: relative;
  height: 100vh;
}

$skewDeg: 18deg;
$magicVH: 32.4vh; // this number is magic and depends on skew angle
$scrollTime: 1s;

.skw-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;

  &__half {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100vh;
    transition: transform $scrollTime;

    &--left {
      left: 0;
      transform: translate3d(-$magicVH, 100%, 0);
        }

    &--right {
      left: 50%;
      transform: translate3d($magicVH, -100%, 0);
    }

    .skw-page.active & {
      transform: translate3d(0,0,0);
    }
  }

  &__skewed {
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 140%;
    height: 100%;
    transform: skewX($skewDeg * -1);
    background: #000;

    .skw-page__half--left & {
      left: -40%;
    }
    .skw-page__half--right & {
      right: -40%;
    }
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 0 30%;
    color: #fff;
    transform: skewX($skewDeg);
    transition: transform $scrollTime, opacity $scrollTime;
    background-size: cover;

    .skw-page__half--left & {
      padding-left: 30%;
      padding-right: 30%;
      transform-origin: 100% 0;
    }
    .skw-page__half--right & {
      padding-left: 30%;
      padding-right: 30%;
      transform-origin: 0 100%;
    }

    .skw-page.inactive & {
      opacity: 0.5;
      transform: skewX($skewDeg) scale(0.95);
    }
  }

  &__heading {
    margin-bottom: 15px;
    text-transform: uppercase;
    font-size: 25px;
    text-align: center;
  }

  &__description {
    font-size: 18px;
    text-align: center;
  }
  
  &__link {
    color: #FFA0A0;
  }

  &-1 {
    .skw-page__half--left .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/mousover-img-1.jpg');
    }
    .skw-page__half--right .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
  }
  &-2 {
    .skw-page__half--left .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
    .skw-page__half--right .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/slider-2.jpg');
    }
  }
  &-3 {
    .skw-page__half--left .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/mousover-img-2.jpg');
    }
    .skw-page__half--right .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
  }
  &-4 {
    .skw-page__half--left .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
    .skw-page__half--right .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg');
    }
  }
  &-5 {
    .skw-page__half--left .skw-page__content {
      background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/img-test.jpg');
    }
    .skw-page__half--right .skw-page__content {
      background: lighten(#1C1C1C, 5%);
    }
  }
}

$(document).ready(function() {

  var curPage = 1;
  var numOfPages = $(".skw-page").length;
  var animTime = 1000;
  var scrolling = false;
  var pgPrefix = ".skw-page-";

  function pagination() {
    scrolling = true;

    $(pgPrefix + curPage).removeClass("inactive").addClass("active");
    $(pgPrefix + (curPage - 1)).addClass("inactive");
    $(pgPrefix + (curPage + 1)).removeClass("active");

    setTimeout(function() {
      scrolling = false;
    }, animTime);
  };

  function navigateUp() {
    if (curPage === 1) return;
    curPage--;
    pagination();
  };

  function navigateDown() {
    if (curPage === numOfPages) return;
    curPage++;
    pagination();
  };

  $(document).on("mousewheel DOMMouseScroll", function(e) {
    if (scrolling) return;
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
      navigateUp();
    } else { 
      navigateDown();
    }
  });

  $(document).on("keydown", function(e) {
    if (scrolling) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });

});