Image Mask Reveal Animation v.2

image-mask-reveal-animation-v-2.markdown

Image Mask Reveal Animation v.2

Scroll down

Demo: https://codepen.io/supah/pen/MXONQP

A Pen by Fabio Ottaviani on CodePen.

License.

index.html

<!--

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>

script.js

$(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();
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

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://images.unsplash.com/photo-1495965478447-052a41235743?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ca957400c4e58a60e146eaaf0da399a8&auto=format&fit=crop&w=1920&q=80');
  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%;
}

styles

<link href="https://fonts.googleapis.com/css?family=Encode+Sans+Condensed" rel="stylesheet" />