Technique #2

Background Offset

This is a popular technique where we offset the background position when the user scrolls. Check out the jQuery Parallax plugin which is an easy way to integrate this effect.

How it's done

This method requires Javascript. We take the distance that the user has scrolled from the top, take a fraction of that distance and set the background position to offset the y-position by that amount.

Code

offsetBackground = ->
  distanceFromTop = $(window).scrollTop()
  $("div[data-parallax-offset]").each ->
    offset = Math.round( - distanceFromTop * 0.2 )
    $(this).css('background-position', "50% #{offset}px")

$(window).scroll ->
  offsetBackground()

Awesome!

Next Technique