Frontend Forever

Parallax + Blur + Fixed menu

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

@import url(https://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://unsplash.imgix.net/45/ZLSw0SXxThSrkXRIiCdT_DSC_0345.jpg?q=75&w=1080&h=1080&fit=max&fm=jpg&auto=format&s=857f07b76abac23a7fb7161cc7b12a46) center no-repeat;
  /* Image Credit: Unsplash.me */
  background-size: cover;
}
header .content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
header h1, header h2 {
  margin: 0;
}
header h2 {
  text-transform: uppercase;
  margin-top: -.5em;
}
header hgroup {
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  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, 0.2);
  z-index: 2;
}
header .overlay {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background:#333 center no-repeat;
  background-size: cover;
  z-index: 0;
  opacity: 0;  -webkit-filter: blur(4px);
}

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

.site nav{
  position:absolute;
  top:0;
  left:0;
  background:#222;
  width:100%
}
.site nav a{
  padding:10px 30px;
  font-size:1.3em;
  display:inline-block
}
.site nav a:hover{
  background:#333;
  color:#fff
}

//Based on the Scroller function from @sallar
var $content = $('header .content')
  , $blur    = $('header .overlay')
  , wHeight  = $(window).height();

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

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

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

Scroller.prototype = {
 
  init: function() {
    window.addEventListener('scroll', this.onScroll.bind(this), false);
    $blur.css('background-image',$('header:first-of-type').css('background-image'));
  },

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

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

update: function() {
    var currentScrollY = this.latestKnownScrollY;
    this.ticking       = false;
    
    
    var slowScroll = currentScrollY / 2
      , blurScroll = currentScrollY * 2
      , opaScroll = 1.4 - currentScrollY / 400;
   if(currentScrollY > wHeight)
     $('nav').css('position','fixed');
   else
     $('nav').css('position','absolute');
    
    $content.css({
      'transform'         : 'translateY(' + slowScroll + 'px)',
      '-moz-transform'    : 'translateY(' + slowScroll + 'px)',
      '-webkit-transform' : 'translateY(' + slowScroll + 'px)',
      'opacity' : opaScroll
    });
    
    $blur.css({
      'opacity' : blurScroll / wHeight
    });
  }
};

var scroller = new Scroller();  
scroller.init();

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Parallax + Blur + Fixed menu

Images

Source Code

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever