Full viewport height image with parallax scrolling

Question

I wish for certain sections of a page to fill out at least 100% of the viewport height regardless of the screen size. I also want the content and background of sections to scroll with a parallax effect.

I have jQuery on the page and use the following to resize the section .parallax to full viewport height:

var imageFit = function() {
  windowHeight = $(window).height();
  $('.parallax').css('min-height', windowHeight);
};

$(document).ready(imageFit);
$(window).resize(imageFit);

I'm aware of the units vh and vw but I don't want to use them because of poor browser support. (By the way, I'm really bad at javascript so please help me improve this if possible).

Here's a pen with the 100% viewport height section: http://codepen.io/Mest/full/GpycL (If unfamiliar with Codepen; click Edit in the bottom left corner to edit the code).

This works fine, however I'm not how to implement the parallax effect. I've tried using Skrollr to modify CSS properties in order to create the parallax effect. However since my section gets it's full viewport height height-value from the script above it seems like Skrollr doesn't consider it to have any height and thus makes the parallax "transition" to occur instantly as I scroll. It works great without the resizing script above.

Sadly I'm unable to set up an example with Skrollr for you, but I confirmed this is what happens by giving my section a height value of X px in my CSS and then Skrollr functioned as it should while scrolling for the first X px.

Thus, my question is the following:

How can I make Skrollr recognize the height set by the script above?

or,

Is there a better/easier way to create the effect I want? Either through another scrolling animation library or with a different approach to fill out the viewport height?

Prinzhorn Prinzhorn · Accepted Answer · 2013-07-28T14:00:38

Don't forget to call refresh() at the end of imageFit.

If you include https://gist.github.com/Prinzhorn/5796546 as well, it would be as simple as

var imageFit = function() {
   windowHeight = $(window).height();
   $('.parallax').css('min-height', windowHeight).refresh();
};

Full viewport height image with parallax scrolling

Thus, my question is the following:

1 Answers