<!--

View also: http://codepen.io/supah/pen/mObvxN

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: http://codepen.io/supah/

-->

<h1>
  scroll
  <svg version="1.1" id="svg-arrow-down" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 35" style="enable-background:new 0 0 22 35;" xml:space="preserve">
    <polygon class="arrow" style="fill:#000000;" points="20.58,11.584 12.004,20.158 12.004,0 9.996,0 9.996,20.158 1.42,11.584 0,13.004 11,24
          22,13.004 "></polygon>
  </svg></h1>
<div id="cover"></div>

body {
  height: 2000px;
}
h1 {
  position: fixed;
  top: 50%;
  left: 50%;
  font-family: sans-serif;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  transform: translate(-50%, -50%);
  
  svg {
    width: 14px;
    display: block;
    margin: 10px auto;
    
    .arrow {
      animation: scroll .35s ease-in alternate infinite;
    }
  }
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

#cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/45/Ss2c5MVASdGkVHOwG6n9_Imogene%20Pass.jpg?dpr=1&auto=format&fit=crop&w=1500&h=997&q=80&cs=tinysrgb&crop=');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  mask: url('http://www.supah.it/dribbble/video-clip-mask.png?v=1');
  mask-size: 1800% 100%;
}

$(window).scroll(function(e) {
  frames = 17;
  step = ($("body").height() - $(window).height()) / frames;
  scrollStep = parseInt($(window).scrollTop() / step);
  maskPosition = 100 / frames * scrollStep;
  $("#cover").css({
    "mask-position": maskPosition + "% 50%",
    "-webkit-mask-position": maskPosition + "% 50%"
  });
});

/* Just for CodePen Thumbnail */
$("html, body").animate({ scrollTop: $(document).height() - $(window).height() }, 1200).queue(function(next) {
  $("html, body").animate({ scrollTop: 0 }, 1200);
  next();
});