Fade scroll

by Snj

HTML

<div class="discText"><pre><b>::</b> Smooth Auto Scroll - With header optacy fade in.</pre></div>
<div id="blurred-image-container" class="headContainer">
  <div class="img-src"></div>
  <div class="img-src blurred-image"></div>
</div>
<div class="content" id="content">
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    <img src="http://media-2.web.britannica.com/eb-media/67/114967-004-E3A58022.jpg" />
    <br>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
</div><div id="bottom"></div>

CSS

html,body{margin:0; padding:0}
.discText {
  position: absolute;
  top: 0px;
}
#blurred-image-container {
    position:fixed; /* fixing the position takes it out of html flow */
    left:0;			/* top left corner should start at leftmost spot */
    top:0;			/* top left corner should start at topmost spot */
    width:100%;		/* take up the full browser width */
    height:50px; 	/* define height so you can define for content */
    z-index:200;	/* high z index so other content scrolls underneath */
}

.img-src { 
    position: absolute;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(251, 251, 251, 0) 100%);
    background-size: cover;
    top: -40px;
    bottom: 0%;
    width:120%;
    height:120%;
}

.img-src.blurred-image {
    opacity:100;

    -webkit-filter: blur(20px) brightness(0.7);
    -ms-filter: blur(20px) brightness(0.7);
    -o-filter: blur(20px) brightness(0.7);
    filter: blur(20px) brightness(0.7);
}
.content {
    text-align:center;
}

JavaScript

$(document).ready(function() {
  window.smoothScrollTo = (function () {
    var timer, start, factor;

    return function (target, duration) {
      var offset = window.pageYOffset,
          delta  = target - window.pageYOffset; // Y-offset difference
      duration = duration || 20000;              // default 1 sec animation
      start = Date.now();                       // get start time
      factor = 0;

      if( timer ) {
        clearInterval(timer); // stop any running animations
      }

      function step() {
        var y;
        factor = (Date.now() - start) / duration; // get interpolation factor
        if( factor >= 1 ) {
          clearInterval(timer); // stop animation
          factor = 1;           // clip to max 1.0
        } 
        y = factor * delta + offset;
        window.scrollBy(0, y - window.pageYOffset);
      }

      timer = setInterval(step, 10);
      return timer;
    };
  }());

  $(window).scroll(function(e) {
    var s = $(window).scrollTop(),
        opacityVal = (s / 200);
    var elementHeight = $('.headContainer').height();
    var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
    console.log(scrollPercent)

    $('.blurred-image').css('opacity', opacityVal);
    //$('.img-src').css('background', 'linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(251, 251, 251, 0) '+ scrollPercent + '%');
  });
 // function scrollSlow() {
  //  $("html, body").animate({scrollTop: $(document).innerHeight()}, 20000);
  //  	return false;    
  	//}
  //scrollSlow();

	smoothScrollTo(document.getElementById('bottom').offsetTop)
});