ParallaxScreenShot

Design,Javascript

Responsive Parallax Navbar Tutorial

10 Feb , 2014  

A Simple Introduction to Parallax Techniques

FULL DEMO »

I know there’s a lot of Parallax tutorials out there; I’m linking to a few at the end of this one!

Mine goes over the way I handle my logotype on the main pages of this site. This is a little different to the scrolling backgrounds of typical parallax sites and one I thought worth looking into, particularly how it fits in to a responsive navbar.

“Is that even parallax?” you say. Good question. Well to answer it, I guess we need to tackle this question…

What Exactly is Parallax?

The Strict Definition

Strictly speaking parallax scrolling is where the background moves more slowly than the foreground (usually the content) to create a 3d effect. Under this proper definition my sliding logo thing doesn’t qualify as anything to do with parallax scrolling. However…

A Looser Definition

Looking around I’ve noticed that parallax scrolling has come to be a bit of a catch-all term for when the content scrolls fairly normally but a variety of pleasing effects and transforms occur in the background or as decoration.

This is the way I’m going to use the term. So there!

Scroll Hijacking

So if having the content scroll normally but with wacky background stuff going on is still called parallax scrolling – doing weird shizzle with the content as you scroll is ‘scroll hijacking’. This is either something delightfully fresh and suprising or it’s the devils work – depending on your point of view or, more pertinently, how well (and why) it’s been done. skrollr – parallax scrolling for the masses!

The Tutorial (finally)

That’s the definitions out of the way. Time to get on with this thing!

Trigger and Value

The basics -(btw jQuery y’all!) – first of all what’s going to trigger the action? Well that is $(window).scroll() and the function will look like this;

$(window).scroll(function() {
  /// code goes here!
});

So that function will be called any and everytime the page is scrolled.

When it does get called all the action, calculations and manipulations will be in relation to how much the page has scrolled. You get that value from $(window).scrollTop().

Fast and Slow

For both the standard parallax scroll and for this variation there are 2 elements; a fast one and a slow one. In this case the big logo is the fast one and will be scrolling normally with the scrollbar. The other element here will be the small logo moving at a slower rate than the natural scroll. The question is, “How much slower?”.

Ratio

If our fast element is just moving with the natural scroll we need to work out the ratio of the 2 different speeds. In other words, if our fast element moves 100px, how many pixels will the slower element move.

In this case the ratio is very simple it is the height of the small logo divided by the height of the big logo. ratio = small logo height / big logo height

After we have this ratio we can multiply it by the scrollTop() value and then we subtract the result from the starting position. small logo xPos = starting position - (scrollTop() * ratio)

Basic Demo

This is the first unresponsive version;

See the Pen Parallax Navbar Thing by Tony Hill (@Designmite) on CodePen.0

Markup

So we have a basic navbar – fixed position, fixed height with a transparent background and a few pretend menu links. There is a small-logo-container div which holds the logo which I have in a h1 element but this could be anything with a class of small-logo. The small-logo-container has a fixed height which is the same as the navbar with the overflow hidden.

My example doesn’t use absolute positioning like most parallax scrolling to move the small-logo but instead uses padding-top. For this example, because the scrolling stops at the top and is also content and not background, this seems to make more sense to me. The padding-top value starts as being the same height as the navbar and decreases as you scroll revealing the small logo.

jQuery

Doesn’t do anything without the jQuery though!

We start by setting up some variables (I’ve tried to use meaningful variable names to cut down on the explaining!);

var navbarColor = "62,195,246"; //color attr for navbar (rgb)
var smallLogoHeight = $('.small-logo').height();
var bigLogoHeight = $('.big-logo').height();
var navbarHeight = $('.navbar').height();

Then I realised that to center the small logo in the navbar I had to work out where the small logo would stop. So;

var smallLogoEndPos = (navbarHeight - smallLogoHeight) / 2;

Working out the ratio, applying that to the scroll value and then calculating the amount of padding to have on the small-logo;

var ratio = (smallLogoHeight / bigLogoHeight);
var ySmall = ($(window).scrollTop() * ratio); 
var smallPadding = navbarHeight - ySmall;

There’s some checks here to make sure the padding stays sensible and then we use the .css() method to change the padding;

  if (smallPadding > navbarHeight) { smallPadding = navbarHeight; }
  if (smallPadding < smallLogoEndPos) { smallPadding = smallLogoEndPos; }
  if (smallPadding < 0) { smallPadding = 0; }

  $('.small-logo-container ').css({ "padding-top": smallPadding});

Thats the parallax scrolling bit, here’s the bit where we fade the navbar in;

  var navOpacity = ySmall / smallLogoHeight; 
  if  (navOpacity > 1) { navOpacity = 1; }
  if (navOpacity < 0 ) { navOpacity = 0; }
  var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')';
  $('.navbar').css({"background-color": navBackColor});

And I like a little shadow under a navbar so;

  var shadowOpacity = navOpacity / 2;
  if ( ySmall > 1) {
    $('.navbar').css({"box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")"});
  } else {
    $('.navbar').css({"box-shadow": "none"});
  }

And thats it. Wait. This isn’t responsive. I wanted a responsive navbar!

Make it Responsive

Bootstrap for Collapsing Menu

Ok! OK! So the first thing we are going to do is port this over to bootstrap 3. This will give us a nice collapsing menu. The HTML is pretty standard markup but we’ve added the small-logo and small-logo-container into the navbar. You can see the HTML in the demo (loving these embedded codepen things btw!)

In the SCSS we’ve overridden some of the default bootstrap just for some color issues but otherwise it all just works.

SCSS Tweakpoints

Another nod to responsiveness I wanted to include was to tweak (nice post about different sorts of breakpoints here) the big logo so it stayed on one line at most widths so I just played around with values til I was happy with this. I love the way you can nest your media queries inside the class for this in SCSS. You can see this SCSS in the demo.

Final Demo

See the Pen Responsive Parallax Navbar Logo – Bootstrap by Tony Hill (@Designmite) on CodePen.0

Resources

  1. A Simple Parallax Scrolling Technique – This one is a very clear intro into the basics. Read the comments as well as they pick up on a couple of small errors in the code.
  2. Simple parallax scrolling tutorial – This one uses skrollr which is a javascript plugin that allows you to do all kinds of scroll related fun and fancy!

We be parallaxing!


Leave a Reply

Your email address will not be published. Required fields are marked *