Implement a Simple Parallax Effect
/**
* Author: Heather Corey
* jQuery Simple Parallax Plugin
*
*/
(function($) {
$.fn.parallax = function(options) {
var windowHeight = $(window).height();
// Establish default settings
var settings = $.extend({
speed : 0.15
}, options);
// Iterate over each object in collection
return this.each( function() {
// Save a reference to the element
var $this = $(this);
// Set up Scroll Handler
$(document).scroll(function(){
var scrollTop = $(window).scrollTop();
var offset = $this.offset().top;
var height = $this.outerHeight();
// Check if above or below viewport
if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
return;
}
var yBgPosition = Math.round((offset - scrollTop) * settings.speed);
// Apply the Y Background Position to Set the Parallax Effect
$this.css('background-position', 'center ' + yBgPosition + 'px');
});
});
}
}(jQuery));
.parallax-section-1 {
height: 450px;
background-position: center top;
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url('paste background image URL here');
}
$('.parallax-section-1').parallax({
speed : 0.15
});
/* Desktop Parallax Photo */
@media (min-width: 651px){
.parallax-section-1 { background-image: url('paste full sized image URL'); }
}
/* Mobile Parallax Photo */
@media (max-width: 650px) {
.parallax-section-1 { background-image: url('paste small image URL'); height: 300px; }
}
http://designers.hubspot.com/docs/snippets/design/implement-a-parallax-effect