<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,800' rel='stylesheet' type='text/css'>


<!-- ##### COPY FROM HERE ##### -->

<button class="change-img prev">
	<span class="arrow-up"></span>
</button>
<button class="change-img next">
	<span class="arrow-down"></span>
</button>
<div class="img-hide-scroll">
  <div class="img-container">
    <button class="full-img"><i class="fa fa-arrows-alt" aria-hidden="true"></i></button>
    <div class="bg-container">
      <img src="https://unsplash.it/2000/1236?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2001/1236?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2000/1235?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2001/1235?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2002/1236?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2000/1237?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2001/1234?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2002/1233?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2003/1237?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2003/1236?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2003/1230?random" />
    </div>
    <div class="bg-container">
      <img src="https://unsplash.it/2003/1231?random" />
    </div>
  </div>
</div>

<!-- ##### COPY TO HERE ##### -->
<!-- Change the img src. Add .bg-container divs and the <img> inside -->


<form action="#" onsubmit="return false" class="changeSize">
  width <input type="text" name="width" placeholder="e.g. 100%" required><br> height <input type="text" name="height" placeholder="400px" required><br>
  <input type="submit" value="change size">
</form>


<div class="info">
  <h2>Pen made with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="http://www.pipiaco.com/en/" target="_blank">Philip M.</a><br><span class="tiny">Try scrolling!</span></h2></div>
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  height: 100%;
  font-family: Open Sans;
}


/* #### COPY FROM HERE #### */

@import 'compass';
.img-hide-scroll {
  @include box-shadow(rgba(0, 0, 0, 0.4) 0px 4px 20px);
  position: absolute;
  left: 50%;
  top: 50%;
  @include transform(translate3d(-50%, -50%, 0));
  width: 100%;
  height: 100%;
  max-width: 647px;
  max-height: 400px;
  overflow: hidden;
  .img-container {
    position: absolute;
    width: calc(100% + 20px);
    height: 100%;
    padding-right: 20px;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    button.full-img {
      position: fixed;
      top: 10px;
      right: 10px;
      z-index: 10;
      width: 30px;
      height: 30px;
      text-align: center;
      @include appearance(none);
      border: none;
      padding: none;
      background: white;
      @include border-radius(999px);
      &.mobile {
        width: 40px;
        height: 40px;
        font-size: 14pt;
        padding-right: 10px;
        i {
          top: 50%;
          left: 50%;
          @include transform(translate(-50%, -50%));
          position: absolute;
        }
      }
      @include transition(ease-in-out 150ms all);
      cursor: pointer;
      @include opacity(.5);
      &:focus {
        outline: 0;
      }
      &:hover {
        @include opacity(.7);
      }
      &:active {
        @include opacity(1);
      }
    }
    .bg-container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      img {
        position: absolute;
        left: 50%;
        top: 50%;
        will-change: transform;
        @include transform(translate3d(-50%, -50%, 0) translateZ(0));
        @include perspective(1000);
        @include backface-visibility(hidden);
        height: 100%;
        -webkit-overflow-scrolling: none;
        width: auto;
        display: none;
      }
    }
  }
}

button.change-img {
  &:focus {
    outline: 0;
  }
  z-index: 10;
  @include appearance(none);
  border: none;
  padding: none;
  background: none;
  @include border-radius(0);
  position: absolute;
  top: 50%;
  left: 50%;
  @include transform(translate(-50%, -50%));
  @include transition(ease-in-out 200ms opacity);
  cursor:pointer;
  @include opacity(.6);
  &:hover {
    @include opacity(1);
  }
  &:active {
    @include opacity(.8);
  }
  &.prev {
    top: 15%;
  }
  &.next {
    top: 85%;
  }
  span {
    position: absolute;
    width: 0;
    height: 0;
  }
  span.arrow-up {
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
    border-style: solid;
    border-width: 0 20px 20px 20px;
    border-color: transparent transparent #CACACA transparent;
  }
  span.arrow-down {
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
    border-style: solid;
    border-width: 20px 20px 0px 20px;
    border-color: #CACACA transparent transparent transparent;
  }
  &.mobile {
    span.arrow-up {
      border-width: 0 30px 30px 30px;
    }
    span.arrow-down {
      border-width: 30px 30px 0px 30px;
    }
  }
}


/* #### COPY TO HERE #### */

.changeSize {
  position: absolute;
  font-size: 8pt;
  text-align: right;
  top: 10px;
  left: 10px;
  @include transition(ease-in-out 400ms opacity);
    @include  transition-delay(4s);
  @include opacity(.2);
  
  &:hover {
    @include opacity(1);
    @include  transition-delay(0s);
  }
  
  input[type='text'] {
    width: 50px;
    right: 0;
    margin-left: 20px;
    background: none;
    border: 1px solid #cecece;
    margin: 2px 0;
    &:focus {
      outline: none;
    }
  }
  input[type='submit'] {
    font-family: Open Sans;
    width: 100%;
    margin-top: 10px;
    background-color: #9c9c9c;
    /* Green */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 10px;
    text-transform: lowercase;
    cursor: pointer;
    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    &:focus {
      outline: none;
    }
    & {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    &:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }
    &:active {
      box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.2), 0 2px 20px 0 rgba(0, 0, 0, 0.19);
    }
  }
}

.info {
  background: rgba(255, 255, 255, 0.8);
  @include border-radius(999px);
  width: 150px;
  height: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  @include transform(translate(-50%, -50%));
  @include transition(ease-in-out 250ms opacity);
  span.tiny {
    font-size: 8pt;
    color: #9C9C9C;
  }
  h2 {
    width: 100px;
    height: 100px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
    color: #1B1B1B;
    font-weight: 200;
    font-size: 12pt;
  }
  a,
  h2 a {
    @include transition(ease-in-out 600ms all);
    font-weight: 300;
    text-decoration: none;
    color: #40A8DE;
  }
  .fa-heart {
    color: #ff1a1a;
  }
  // &.mobile {
  //   width: 180px;
  //   height: 180px;
  //   h2{
  //   top: 43%;
  //   font-size: 14pt;
  //   }
  //   span.tiny {
  //     font-size: 10pt;
  //   }
  // }
  a {
    font-weight: 200;
    color: #2eb82e;
  }
  a:hover,
  h2 a:hover {
    opacity: .7;
  }
}
View Compiled
/* Copy all javascript
 * Author: Philip M.
 * 
 * Light-weight parallax
 *
 */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  $('button.change-img').addClass('mobile');
  $('button.full-img').addClass('mobile');
  $('.info').addClass('mobile');
  $('.img-container').parent().addClass('mobile');
  $('.changeSize').remove();
}
$('.img-container').bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', function(e) {
  if (e.which > 0 || e.type == "mousedown" || e.type == "mousewheel") {
    $('.img-container').stop();
  }
});

$(document).keyup(function(e) {
  if (e.keyCode == 27) {
    var container = $('.full-screen, .full-screen-mobile');
    document.goFullScreen(container);
  }
});

document.addEventListener("DOMContentLoaded",
  function(event) {
    window.img = {
      'objs': $('.img-container .bg-container img')
    };

    var reverse = false;
    var loaded = 0;
    $('img').load(function() {
      if ($('img').length != loaded) {
        loaded++;
        document.adjSizes($(this));
      }
    });

    var trans = 0;
    var parallaxObj = function(scroll, curID) {
      var e = $('.img-container .bg-container img').eq(curID);
      if (typeof(e) !== 'undefined') {
        var y = -1 * $('.img-container .bg-container').height() / 2;
        trans = ((scroll - (curID * e.parent().parent().height())) * window.ratio) + y;
        e.css({
          'transform': 'translate3d(-50%,' + trans + 'px,0)'
        });
      }
    };

    var jumpImg = function(curID, speed) {
      if (typeof(speed) === 'undefined')
        speed = 800;
      $('.img-container').animate({
        scrollTop: curID * $('.img-container').height()
      }, speed, function()  {
        $('button.full-img').css({
          'opacity': .5
        });
      });
    }
    window.tmpSize = {
      'width': $('.img-container').width(),
      'height': $('.img-container').height()
    };

    var triggerTimer = window.triggerTimer = function(curID) {
      clearTimeout($.data(this, 'scrollTimer'));
      clearTimeout($.data(this, 'scrollTimer2'));
      $.data(this, 'scrollTimer', setTimeout(function() {
        jumpImg(curID);
      }, 200));
      $.data(this, 'scrollTimer2', setTimeout(function() {
        $('.info').css({
          'opacity': 1
        });
      }, 2000));
    };

    var curID = document.curID = 0;
    window.toggleFS = false;
    var scroll = function(e) {
      var scroll = $(e).scrollTop();
      $('button.full-img').css({
        'opacity': 0
      });
      $('.info').css({
        'opacity': 0
      });
      if (!window.toggleFS) {
        curID = document.curID = Math.floor(scroll / $(e).height());
        if (curID > 0)
          parallaxObj(scroll, curID - 1);
        parallaxObj(scroll, curID);
        parallaxObj(scroll, curID + 1);
        parallaxObj(scroll, curID + 2);
        parallaxObj(scroll, curID + 3);
      }
      triggerTimer((scroll - ($('.img-container').height() * curID) < $('.img-container').height() / 2 ? curID : curID + 1));
    };
    document.addEventListener("touchmove", scroll, false);
    $('.img-container').scroll(function() {
      scroll($(this));
    });

    $('button.change-img').on('click', function() {
      jumpImg(($(this).hasClass('prev') ? curID - 1 : curID + 1));
    });

    var goFullScreen = document.goFullScreen = function(container) {
      if (!window.toggleFS) {
        var animationDuration = window.animationDuration = 700;
        window.toggleFS = true;
        var e = $('.img-container .bg-container img').eq(curID);
        $('.img-container .bg-container img').css({
          'transform': 'translate3d(-50%,-50%,0)'
        });
        var counter = 0;
        var handle = setInterval(function() {
          document.adjSizes();
          if (counter === parseInt(window.animationDuration / 5))
            clearInterval(handle);
        }, 5);
        setTimeout(function() {
          window.toggleFS = false;
        }, animationDuration + 200);

        if (container.hasClass('mobile')) {
          container.toggleClass('full-screen-mobile');
          if (container.hasClass('full-screen-mobile')) {
            window.contTmpSize = {
              'width': $(this).parent().css('max-width'),
              'height': $(this).parent().css('max-height'),
              'transform': $(this).parent().css('transform')
            };
            container.animate({
              'width': '100%',
              'height': '100%'
            }, animationDuration);
          } else {
            container.animate({
              'max-width': window.contTmpSize.width,
              'max-height': window.contTmpSize.height
            }, animationDuration);
          }

        } else {
          container.toggleClass('full-screen');
        }

        if (container.hasClass('full-screen') ||  container.hasClass('full-screen-mobile')) {
          var scroll = curID * container.parent().height();
          container.animate({
            maxHeight: container.parent().height(),
            maxWidth: container.parent().width()
          }, animationDuration);
          container.find('.img-container').animate({
            scrollTop: scroll
          }, animationDuration);
        } else {
          var scroll = curID * window.tmpSize.height;
          container.animate({
            maxHeight: window.tmpSize.height,
            maxWidth: window.tmpSize.width
          }, animationDuration);
          container.find('.img-container').animate({
            scrollTop: scroll
          }, animationDuration);
        }
      }
    }

    $('button.full-img').on('click', function() {
      var container = $(this).parent().parent();
      goFullScreen(container);
    });

    $('.changeSize').submit(function(e) {
      window.tmpSize = {
        'width': $(this).find('input[name="width"]').val(),
        'height': $(this).find('input[name="height"]').val()
      };

      $('.img-container').animate({
        scrollTop: 0
      }, 800, function() {
        $('.img-container').parent().animate({
          maxWidth: window.tmpSize.width,
          maxHeight: window.tmpSize.height
        }, 600);
        var counter = 0;
        var handle = setInterval(function() {
          document.adjSizes();
          var scroll = $('.img-container').scrollTop();
          parallaxObj(scroll, curID);
          parallaxObj(scroll, curID + 1);
          parallaxObj(scroll, curID + 2);
          parallaxObj(scroll, curID + 3);
          if (counter === parseInt(600 / 5))
            clearInterval(handle);
        }, 5);
      });

    });
    setTimeout(function() {
      setInterval(function() {
        if (!$('.img-container').parent().hasClass('full-screen') &&  !$('.img-container').parent().hasClass('full-screen-mobile')) {
          if (reverse) {
            jumpImg(curID - 1, 1600);
          } else {
            jumpImg(curID + 1, 1600);
          }

          if (curID + 1 === $('.img-container .bg-container img').length && !reverse) {
            reverse = true;
          } else if (curID === 0) {
            reverse = false;
          }
        }
      }, 6000);
    }, 5000);

    window.ratio = 0.65;
    document.adjSizes();
  }
);

$(window).resize(function() {
  document.adjSizes();
});

document.adjSizes = function(img) {
  var parent = $('.img-container');
  if (typeof(img) !== 'undefined') {
    window.img = {
      'objs': $(img)
    };
  }
  window.img.width = window.img.objs.width();
  window.img.height = window.img.objs.height();
  if (window.img.height - parent.height() < 0) {
    window.img.objs.css({
      'width': 'auto',
      'height': '100%'
    });
  } else if (window.img.width - parent.width() < 0) {
    window.img.objs.css({
      'height': 'auto',
      'width': '100%'
    });
  }
  if (typeof(img) !== 'undefined') {
    img.fadeIn();
  }
  window.img = {
    'objs': $('.img-container .bg-container img')
  };
  window.img.topOff = window.img.objs.offset().top;
};
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js