<main>
<section class="slides"> 
  
  <section class="slides-nav">
    <nav class="slides-nav__nav">
      <button class="slides-nav__prev js-prev">Prev</button>
      <button class="slides-nav__next js-next">Next</button>
    </nav>
  </section>

  <section class="slide is-active">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/nfTA8pdaq9A/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>Click, Key</span></span>
          <span class="title-line"><span>Or Scroll Fool</span></span>
        </h2>
      </header>
    </div>
  </section>

  <section class="slide">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/okmtVMuBzkQ/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>Slide Two</span></span>
          <span class="title-line"><span>Dood Mood</span></span>
        </h2>
      </header>
    </div>
  </section>

  <section class="slide">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/WuQME0I_oZA/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>This Right</span></span>
          <span class="title-line"><span>Here Makes Three</span></span>
        </h2>
      </header>
    </div>
  </section>

  <section class="slide">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/NsWcRlBT_74/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>How Now</span></span>
          <span class="title-line"><span>Part Four More</span></span>
        </h2>
      </header>
    </div>
  </section>
</section>
</main>
// fonts
$font-header: Montserrat, helvetica;
$font-nav : "Space Mono", monospace;
// colors
$color-dark: #111;
$color-border: #ccc;
$color-trans-bg: #ededed;
// easings
$ease-cb: cubic-bezier(.4,0,.2,1);
$ease-cb-2: cubic-bezier(.19,1,.22,1);
$ease-cb-3: cubic-bezier(.77,0,.175,1);
$ease-cb-4: cubic-bezier(.99,1,.92,1);
// padding
$pad: 3em;
// mqs
$mq-med: 54em;
$mq-large: 65em;
$mq-xlarge: 91em;


//------------------------------
//  nth-trans-delay()
//  Transition Delay on nth-childs
//  @param: $delay_items: number of nth-of-type items to create
//  @param: $delay_time: transition-dealy value
//-----------------------------
@mixin nth-trans-delay($delay_items: 7, $delay_time: 0.2s){
  @for $i from 1 through $delay_items {
    &:nth-child(#{$i}) {   
     transition-delay: $delay_time * $i; 
    }
  }
}

//-------------------------------
//  Body, prevent scrolling
//-------------------------------
body{
  height: 100%;
  overflow-y:hidden;
}

//-------------------------------
//  Slides Nav
//-------------------------------
.slides-nav{
  z-index: 99;
  position: fixed;
  // Grimey, not sure why
  // 0 isn't working
  right: -5%;
  display: flex;
  align-items: center;
  height: 100%;
  color: #111;
  
  @media (min-width: $mq-med){
    right: 2%;
  }

  &__nav{
    position: relative;
    right: 0;
    display: block;
    font-size: 1em;
    transform: rotate(90deg);
    transform-origin: center;
  }

  button{
    position: relative;
    display:inline-block;
    padding: 0.35em;
    margin: 0;
    font-family: $font-nav;
    appearance: none;
    background:transparent;
    border: 0;
    overflow-x:hidden;
    transition: color 0.5s ease;
    
    &:after{
      content:'';
      position: absolute;
      top: 50%;
      left: 0;
      height:1px;
      width: 0;
      background: $color-dark;
      transition: width 0.4s ease;
    }
    &:hover{
      cursor:pointer;
      color: rgba($color-dark, 0.75);
      transition: color 0.5s ease;
    }
    &:hover:after{
      width:100%;
      transition: width 0.4s ease;
    }
    // Yeah... I know
    &:focus{
      outline: 0;
    }
  }
  // If is Sliding, prevent 
  // double clicks
  .is-sliding &{
    pointer-events:none;
  }
}

//-------------------------------
//  Slides
//-------------------------------
.slides{
  position: relative;
  display: block;
  height: 100vh;
  width:100%;
  background: #fff;
  transition: background 1s $ease-cb-4;

  .is-sliding &{
    background: $color-trans-bg;
    transition: background 0.3s $ease-cb-4;
  }
}

//-------------------------------
//  Single Slide
//-------------------------------
$slide-content-size-sm: 95%;
$slide-content-size: 80%;

.slide{
  z-index: -1;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100vh;
  transition: z-index 1s ease;
  
  // Bring active layer to foreground
  &.is-active{
    z-index: 19;
    transition: z-index 1s ease;
  }

  &__content{
    position: relative;
    margin: 0 auto;
    height: $slide-content-size-sm;
    width: $slide-content-size-sm;
    top: (100% - $slide-content-size-sm) / 2;
    
    @media (min-width: $mq-med){
      height: $slide-content-size;
      width: $slide-content-size;
      top: (100% - $slide-content-size) / 2;
    }
  }

  &__header{
    z-index: 9;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    overflow-y: hidden;
    transform: translateX(5%);
    
    @media (min-width: $mq-med){
      transform: translateX(-5%);
    }
  }

  &__title{
    font-family: $font-header;
    font-size: 2.5em;
    font-weight: 700;
    color: $color-dark;
    overflow-y: hidden;
    
    @media (min-width: $mq-med){
      font-size: 5em;
    }
     
    // Slice text animation
    .title-line{
      display: block;
      overflow-y: hidden;

      span{
        display: inline-block;
        transform:translate3d(0,140%,0);
        opacity: 0;
        transition: transform 0.4s ease, opacity 0.8s ease;
        @include nth-trans-delay(2, 0.15s);
      }

      .is-active & span{
        transform:translate3d(0,0%,0);
        opacity: 1;
        transition: transform 0.6s $ease-cb-3, opacity 0.1s ease;
      }
      .is-active &:nth-of-type(2n) span{
        transition-delay:0.2s;
      }
    }
  }
  
  // Image wrapper
  &__figure{
    z-index: 7;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 100%;
    width: 100%;
    //overflow-y: hidden;
    transition: transform 0.5s $ease-cb-2;
     
    // Scale Image
    .is-sliding &{
      transform: scale(0.8);
      transition: transform 0.5s $ease-cb-2;
    }
  }
  &__img{
    position: relative;
    display: block;
    background-size: cover;
    background-attachment: fixed;
    background-position: 50%;
     -webkit-backface-visibility: hidden;
     //will-change:height;
    height: 0%;
    width: 100%;
    filter: grayscale(0%);
    transition: height 1s 1.4s $ease-cb-2, filter 0.4s 0.1s ease;
      
    .is-active &{
      height: 100%;
      opacity: 1;
      transition: height .5s .3s $ease-cb-3, filter 0.4s 0.1s ease;
    }
    .is-sliding &{
      filter: grayscale(100%);
    }
  }
}
View Compiled
(function($) {
 
  var SliceSlider = {
    
    /**
     * Settings Object
     */
    settings: {
      delta:              0,
      currentSlideIndex:  0,
      scrollThreshold:    40,
      slides:             $('.slide'),
      numSlides:          $('.slide').length,
      navPrev:            $('.js-prev'),
      navNext:            $('.js-next'),
    },
    
    /**
     * Init
     */
    init: function() {
      s = this.settings;
      this.bindEvents();
    },
    
    /**
     * Bind our click, scroll, key events
     */
    bindEvents: function(){
      
      // Scrollwheel & trackpad
      s.slides.on({
        'DOMMouseScroll mousewheel' : SliceSlider.handleScroll
      });
      // On click prev
      s.navPrev.on({
        'click' : SliceSlider.prevSlide
      });
      // On click next
      s.navNext.on({
        'click' : SliceSlider.nextSlide
      });
      // On Arrow keys
      $(document).keyup(function(e) {
        // Left or back arrows
        if ((e.which === 37) ||  (e.which === 38)){
          SliceSlider.prevSlide();
        }
        // Down or right
        if ((e.which === 39) ||  (e.which === 40)) {
          SliceSlider.nextSlide();
        }
      });
    },
    
    /** 
     * Interept scroll direction
     */
    handleScroll: function(e){

      // Scrolling up
      if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) { 

        s.delta--;
     
        if ( Math.abs(s.delta) >= s.scrollThreshold) {
          SliceSlider.prevSlide();
        }
      }
 
      // Scrolling Down
      else {
 
        s.delta++;
 
        if (s.delta >= s.scrollThreshold) {
          SliceSlider.nextSlide();
        }
      }
 
      // Prevent page from scrolling
      return false;
    },

    /**
     * Show Slide
     */
    showSlide: function(){ 
      // reset
      s.delta = 0;
      // Bail if we're already sliding
      if ($('body').hasClass('is-sliding')){
        return;
      }
      // Loop through our slides
      s.slides.each(function(i, slide) {

        // Toggle the is-active class to show slide
        $(slide).toggleClass('is-active', (i === s.currentSlideIndex)); 
        $(slide).toggleClass('is-prev', (i === s.currentSlideIndex - 1)); 
        $(slide).toggleClass('is-next', (i === s.currentSlideIndex + 1)); 
        
        // Add and remove is-sliding class
        $('body').addClass('is-sliding');

        setTimeout(function(){
            $('body').removeClass('is-sliding');
        }, 1000);
      });
    },

    /**
     * Previous Slide
     */
    prevSlide: function(){
      
      // If on first slide, loop to last
      if (s.currentSlideIndex <= 0) {
        s.currentSlideIndex = s.numSlides;
      }
      s.currentSlideIndex--;
      
      SliceSlider.showSlide();
    },

    /**
     * Next Slide
     */
    nextSlide: function(){
      
      s.currentSlideIndex++;
   
      // If on last slide, loop to first
      if (s.currentSlideIndex >= s.numSlides) { 
        s.currentSlideIndex = 0;
      }
 
      SliceSlider.showSlide();
    },
  };
  SliceSlider.init();
})(jQuery);

External CSS

  1. https://fonts.googleapis.com/css?family=Montserrat:700|Space+Mono

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js