https://sme.in/Plugins/jquery.parallax.js

1
2
3(function( $ ){
4	var $window = $(window);
5	var windowHeight = $window.height();
6
7	$window.resize(function () {
8		windowHeight = $window.height();
9	});
10
11	$.fn.parallax = function(xpos, speedFactor, outerHeight) {
12		var $this = $(this);
13		var getHeight;
14		var firstTop;
15		var paddingTop = 0;
16		
17		//get the starting position of each element to have parallax applied to it		
18		$this.each(function(){
19		    firstTop = $this.offset().top;
20		});
21
22		if (outerHeight) {
23			getHeight = function(jqo) {
24				return jqo.outerHeight(true);
25			};
26		} else {
27			getHeight = function(jqo) {
28				return jqo.height();
29			};
30		}
31			
32		// setup defaults if arguments aren't specified
33		if (arguments.length < 1 || xpos === null) xpos = "50%";
34		if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
35		if (arguments.length < 3 || outerHeight === null) outerHeight = true;
36		
37		// function to be called whenever the window is scrolled or resized
38		function update(){
39			var pos = $window.scrollTop();				
40
41			$this.each(function(){
42				var $element = $(this);
43				var top = $element.offset().top;
44				var height = getHeight($element);
45
46				// Check if totally above or totally below viewport
47				if (top + height < pos || top > pos + windowHeight) {
48					return;
49				}
50
51				$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
52			});
53		}		
54
55		$window.bind('scroll', update).resize(update);
56		update();
57	};
58})(jQuery);