A Pen by A973C.

Blur-on-Scroll-+-Simple-Parallax.markdown

Blur on Scroll + Simple Parallax

This pen demonstrates a simple medium.com-like blur image on scroll and content parallax. It gets the scroll position using requestAnimationFrame instead of an onScroll event.

A Pen by A973C on CodePen.

License.

index.html

<header>
  <div class="content">
    <hgroup>
      <h1>Hello.</h1>
      <h2>I’m a freaking startup.</h2>
    </hgroup>
  </div>
  <div class="overlay"></div>
</header>
<section class="site">
  Created by <a href="http://sallar.me" target="_blank">Sallar Kaboli</a>.<br><a href="http://sallar.mit-license.org/" target="_blank">MIT Licensed</a>.
</section>

script.js

/**
 * Created by Sallar Kaboli <[email protected]>
 * @sallar
 * 
 * Released under the MIT License.
 * http://sallar.mit-license.org/
 * 
 * This document demonstrates three things:
 * 
 * - Creating a simple parallax effect on the content
 * - Creating a Medium.com-style blur on scroll image
 * - Getting scroll position using requestAnimationFrame for better performance
 */


/**
 * Cache
 */
var $content = $('header .content')
  , $blur    = $('header .overlay')
  , wHeight  = $(window).height();

$(window).on('resize', function(){
  wHeight = $(window).height();
});

/**
 * requestAnimationFrame Shim 
 */
window.requestAnimFrame = (function()
{
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

/**
 * Scroller
 */
function Scroller()
{
  this.latestKnownScrollY = 0;
  this.ticking            = false;
}

Scroller.prototype = {
  /**
   * Initialize
   */
  init: function() {
    window.addEventListener('scroll', this.onScroll.bind(this), false);
  },

  /**
   * Capture Scroll
   */
  onScroll: function() {
    this.latestKnownScrollY = window.scrollY;
    this.requestTick();
  },

  /**
   * Request a Tick
   */
  requestTick: function() {
    if( !this.ticking ) {
      window.requestAnimFrame(this.update.bind(this));
    }
    this.ticking = true;
  },

  /**
   * Update.
   */
  update: function() {
    var currentScrollY = this.latestKnownScrollY;
    this.ticking       = false;
    
    /**
     * Do The Dirty Work Here
     */
    var slowScroll = currentScrollY / 4
      , blurScroll = currentScrollY * 2;
    
    $content.css({
      'transform'         : 'translateY(-' + slowScroll + 'px)',
      '-moz-transform'    : 'translateY(-' + slowScroll + 'px)',
      '-webkit-transform' : 'translateY(-' + slowScroll + 'px)'
    });
    
    $blur.css({
      'opacity' : blurScroll / wHeight
    });
  }
};

/**
 * Attach!
 */
var scroller = new Scroller();  
scroller.init();

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Lato);

html, body{
  padding: 0;
  margin: 0;
  height: 100%;
}

html{
  font: 1em/1.5 "Lato", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
}

body{
  font-size: 1.3em;
}

header{
  height: 100%;
  position: relative;
  overflow: hidden;
  background: url(https://dl.dropboxusercontent.com/u/16657557/scripts/blur/bg.jpg) center no-repeat; /* Image Credit: Unsplash.me */
  background-size: cover;
  
  .content{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1;
  }
  
  h1, h2{
    margin: 0;
  }
  
  h2{
    text-transform: uppercase;
    margin-top: -.5em;
  }
  
  hgroup{
    @include transform(translate(-50%, -50%));
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    border: 5px solid #fff;
    padding: .5em 3em;
    background-color: rgba(0,0,0,.2);
    z-index: 2;
  }
  
  .overlay{
    position: absolute;
    top: 0; right: 0; left: 0; bottom: 0;
    background: url(https://dl.dropboxusercontent.com/u/16657557/scripts/blur/bg-blurred.jpg) center no-repeat;
    background-size: cover;
    z-index: 0;
    opacity: 0;
  }
}

.site{
  padding: 20em 0;
  text-align: center;
  background-color: #efefef;
  
  font-size: .8em;
  color: #444;
  
  a{
    color: #666;
    text-decoration: none;
    
    &:hover{
      color: #222;
    }
  }
}