Parallax эффект jQuery

Вертикальная прокрутка страницы.

by akogch

HTML

<div class="wrapper">
  <div class="left">
    <div class="bg-1 left-item item current">111</div>
    <div class="bg-2 left-item item">222</div>
    <div class="bg-3 left-item item">333</div>
  </div>
  <div class="right">
    <div class="bg-3 right-item item">333</div>
    <div class="bg-2 right-item item">222</div>
    <div class="bg-1 right-item item current">111</div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overflow: hidden;
}

.wrapper {
  display: flex;
  height: 100%;
  position: relative;
}

.left,
.right {
  position: absolute;
  height: 100%;
}

.left-item,
.right-item {
  position: absolute;
  height: 100%;
  width: 100%;
  transition: all .6s ease-out;
}

.left {
  width: 30%;
  left: 0;
  top: 0;
}

.left .item {
  transform: translateY(-100%) translateZ(0px);
  border-right: 2px solid #000;
}

.right {
  width: 70%;
  left: 30%;
  top: 0;
}

.right .item {
  transform: translateY(100%) translateZ(0px);
}

.item.current {
  transform: translateY(0%) translateZ(0px);
}

.item.left-after {
  transform: translateY(100%) translateZ(0px);
}

.item.right-after {
  transform: translateY(-100%) translateZ(0px);
}

.item {
  height: 100%;
}

.bg-1 {
  background: #58c1d2;
}

.bg-2 {
  background: orange;
}

.bg-3 {
  background: green;
}

JavaScript

$(window).bind('mousewheel DOMMouseScroll', function(event) {
  if ($('.item').hasClass('delay')) {
    return false;
  }
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    scroll($('.right'), true);
    scroll($('.left'), false);
  } else {
    scroll($('.left'), true);
    scroll($('.right'), false);
  }
});

function scroll(el, kuda) {
  el.each(function() {
    var count = $(this).find('.item').length;
    var index = $(this).find('.current').index();
    var item = $(this).find('.item');
    var nextIndex;

    if (kuda) {
      item.eq(index).removeClass('current');
      if (!(index == count - 1)) {
        item.eq(index).addClass('left-after');
      }
      nextIndex = index + 1;
      if (nextIndex == count) {
        nextIndex = count - 1;
      }
    } else {
      item.eq(index).removeClass('current');
      if (!index == 0) {
        item.eq(index).addClass('right-after');
      }
      nextIndex = index - 1;
      if (nextIndex <= 0) {
        nextIndex = 0;
      }
    }
    item.eq(nextIndex).removeClass('left-after right-after').addClass('current');
    item.eq(nextIndex).addClass('delay').delay(600).queue(function() {
      $(this).removeClass("delay").dequeue();
    });
  });
}