Skip to content

Instantly share code, notes, and snippets.

@gwing33
Created January 20, 2011 18:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gwing33/788328 to your computer and use it in GitHub Desktop.
Save gwing33/788328 to your computer and use it in GitHub Desktop.
Parallapser (v1.0) - on the targeted object, you can define how much it moves on scroll by percent. It's basically a Parallax engine.
(function( $ ){
var methods = {
init : function( options ) {
return this.each(function(){
var $this = $(this), data;
if ( ! $this.data('parallapse') ) {
$this.data('parallapse', { percent : 80, max_movement : 0, offset_height : 0 });
}
data = $this.data('parallapse');
if ( options ) { $.extend( data, options ); }
data.max_movement = $.fn.parallapse.calc_max_movement(data.percent);
$this.css({'position': 'fixed'});
$(window).bind('resize.parallapse', {obj: $this}, methods.reposition);
$(window).bind('scroll.parallapse', {obj: $this}, methods.reposition);
});
},
reposition : function( event ) {
var $this = event.data.obj, data = $this.data('parallapse');
data.offset_height = ($(window).scrollTop() / $(document).height()) * data.max_movement;
$this.css({ top: -data.offset_height });
}
};
// Define the namespace for Parallapse
$.fn.parallapse = function(method) {
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.parallapse' );
}
};
$.fn.parallapse.calc_max_movement = function(percent) {
return $(document).height() * (percent / 100);
};
function debug(obj) {
if (window.console && window.console.log) {
window.console.log(obj);
}
};
})( jQuery );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment