<!--

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>
  Over every mountain<br>
  there is a path
</h1>  
<div id="cover"></div>

body {
  height: 2000px;
  background: linear-gradient(to bottom, #0d2d40, #0c0c0c);
}
h1 {
  position: fixed;
  top: 50%;
  left: 50%;
  font-family: 'Encode Sans Condensed', sans-serif;
  text-align: center;
  font-size: 34px;
  color: #fbd640;
  transform: translate(-50%, -50%);
  text-transform: uppercase;
  background: -webkit-linear-gradient(15deg, #e04f30, #fad640);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://raw.githubusercontent.com/supahfunk/supah-codepen/master/mountain2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  mask: url('https://raw.githubusercontent.com/supahfunk/supah-codepen/master/video-clip-mask.png');
  mask-size: 1800% 100%;
}

$(window).scroll(function(e) {
  frames = 17;
  step = ($("body").height() - $(window).height()) / frames;
  scrollStep = parseInt($(window).scrollTop() / step);
  maskPosition = 100 - ( 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();
});