effect posts

Recently, I made my first foray into the popular parallax on websites fad. My needs were simple: I needed to make background images move at a different rate than the content that sat on top of them when scrolling occurred. This was the first type of parallax I saw on the web and the most intriguing to me. I figured that there would be a lot of already built libraries to make this easy. Looking through the parallax libraries though, the most popular ones were quite complex or didn't do what I wanted. I did find a couple of scripts that just handled the background image parallax, but I had some problems getting them working, and they didn't work with vertically centered images.

In the end, I took ideas from those scripts and some articles to create my own parallax script. With my class library removed, the script would look like the following:

var ParallaxBackground = function(_opts){
	jQuery.extend(this, _opts);
	if(this.elm){
		this.constructor.window.on('load resize scroll', jQuery.proxy(this._changeHandler, this));
	}
};
ParallaxBackground.window = jQuery(window);
jQuery.extend(ParallaxBackground.prototype, {
	elm: undefined
	,calcType: 'centeredStart'
	,movementRatio: 0.8
	,_changeHandler: function(){
		var _viewportHeight = this.constructor.window.height();
		var _viewportTop = this.constructor.window.scrollTop();
		var _elmHeight = this.elm.outerHeight();
		var _elmTop = this.elm.offset().top;
		var _range = _elmHeight + _viewportHeight;
		var _calcOffset = _elmTop - _viewportHeight;
		var _diff = -((_viewportTop - _calcOffset) - _range);
		var _bgPosition;
		if(_diff > _range){
			_bgPosition = 100;
		}else if(_diff < 0){
			_bgPosition = 0;
		}else{
			_bgPosition = (_diff / _range) * 100;
		}
		switch(this.calcType){
			case 'centered':
				_bgPosition = 50 + (_bgPosition - 50) * this.movementRatio;
			break;
			case 'centeredStart':
				if(typeof this._startOffset === 'undefined'){
					var _startingPosition = this.elm.css('background-position-y');
					if(_startingPosition.indexOf('%') !== -1){
						_startingPosition = parseInt(_startingPosition,10);
					}
					this._startOffset = -1 * (50 + (_bgPosition - 50) * this.movementRatio - _startingPosition);
				}
				_bgPosition = 50 + (_bgPosition - 50) * this.movementRatio + this._startOffset;
			break;
		}

		this.elm.css('background-position', 'center ' + _bgPosition + '%');
	}
	,_startOffset: undefined
});