#scroll-animate-main
{
  width: 100%;
  left: 0;
  position: fixed;
}

#heightPage,
#heightScroll
{
  width: 10px;
  top: 0;
  position: absolute;
  z-index: 99;
}

#heightPage
{
  left: 0;
}

#heightScroll
{
  right: 0;
}

header
{
  width: 100%;
  height: 100%;
  background: url(http://www.hudsonmarinho.com/lab/header-and-footer-parallax-effect/bg-header.jpg) no-repeat 50% 50%;
  top: 0;
  position: fixed;
  z-index: -1;
}

footer
{
  width: 100%;
  height: 300px;
  background: gray;
  bottom: -300px;
  position: fixed;
  z-index: -1;
}

.content
{
  height: 1000px;
  min-height: 1000px;
  background: #ededed;
  position: relative;
  z-index: 1;
}

.wrapper-parallax {
  margin-top: 100%;
  margin-bottom: 300px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

h1{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: Helvetica;
  font-size: 100px;
  color: #fff;
}

header h1{}

.content h1{
  line-height: 1000px;
  color: #999;
}

footer h1
{
  line-height: 300px;
}

header,
footer,
#scroll-animate-main
{
  -webkit-transition-property: all;
     -moz-transition-property: all;
      transition-property: all;

  -webkit-transition-duration: 0.4s;
     -moz-transition-duration: 0.4s;
      transition-duration: 0.4s;

  -webkit-transition-timing-function: cubic-bezier(0, 0, 0, 1);
     -moz-transition-timing-function: cubic-bezier(0, 0, 0, 1);
      transition-timing-function: cubic-bezier(0, 0, 0, 1);
}

function scrollFooter(a, b) {
    console.log(a);
    console.log(b);
    if (a >= b) {
        $("footer").css({
            bottom: "0px"
        })
    } else {
        $("footer").css({
            bottom: "-" + b + "px"
        })
    }
}
$(window).load(function () {
    var c = $(window).height(),
        b = $("footer").height(),
        a = (c) + ($(".content").height()) + ($("footer").height()) - 20;
    $("#scroll-animate, #scroll-animate-main").css({
        height: a + "px"
    });
    $("header").css({
        height: c + "px",
        "line-height": c + "px"
    });
    $(".wrapper-parallax").css({
        "margin-top": c + "px"
    });
    scrollFooter(window.scrollY, b);
    window.onscroll = function () {
        var d = window.scrollY;
        $("#scroll-animate-main").css({
            top: "-" + d + "px"
        });
        $("header").css({
            "background-position-y": 50 - (d * 100 / a) + "%"
        });
        scrollFooter(d, b)
    }
});