Skip to content

Instantly share code, notes, and snippets.

@terkel
Created March 12, 2012 08:16
Show Gist options
  • Save terkel/2020675 to your computer and use it in GitHub Desktop.
Save terkel/2020675 to your computer and use it in GitHub Desktop.
jQuery Parallax Effect plugin
/*!
* jQuery Parallax Effect plugin v0.9
* https://gist.github.com/2020675
*
* Copyright (c) 2012 Takeru Suzuki - http://terkel.jp/
* Licensed under the MIT license - http://www.opensource.org/licenses/MIT
*/
(function (window, $) {
$.fn.parallax = function (options) {
var opts = $.extend({}, $.fn.parallax.defaults, options);
return this.each(function () {
var $this = $(this),
$window = $(window),
pos = $this.position(),
left = pos.left,
top = pos.top,
coeffX = opts.coeffX,
coeffY = opts.coeffY,
didScroll = false;
$window.bind('scroll', function () {
didScroll = true;
});
setInterval(function () {
if (didScroll) {
var y = $window.scrollTop();
$this.stop().animate({
left: left + y * coeffX,
top: top + y * coeffY
}, opts.duration, opts.easing);
didScroll = false;
}
}, 200);
});
};
$.fn.parallax.defaults = {
duration: 1600,
easing: 'swing',
coeffX: 0, // +right -left
coeffY: -0.25 // +down -up
};
})(window, jQuery);
/*!
* jQuery Parallax Effect plugin v0.9
* https://gist.github.com/2020675
*
* Copyright (c) 2012 Takeru Suzuki - http://terkel.jp/
* Licensed under the MIT license - http://www.opensource.org/licenses/MIT
*/
(function(h,a){a.fn.parallax=function(c){var b=a.extend({},a.fn.parallax.defaults,c);return this.each(function(){var e=a(this),f=a(h),g=e.position(),c=g.left,i=g.top,j=b.coeffX,k=b.coeffY,d=!1;f.bind("scroll",function(){d=!0});setInterval(function(){if(d){var a=f.scrollTop();e.stop().animate({left:c+a*j,top:i+a*k},b.duration,b.easing);d=!1}},200)})};a.fn.parallax.defaults={duration:1600,easing:"swing",coeffX:0,coeffY:-0.25}})(window,jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment