Skip to content

Instantly share code, notes, and snippets.

@jgthms
Created July 13, 2015 21:30
Show Gist options
  • Save jgthms/7e6e78f7d1cb3d1c6185 to your computer and use it in GitHub Desktop.
Save jgthms/7e6e78f7d1cb3d1c6185 to your computer and use it in GitHub Desktop.
jquery centerify
jQuery(document).ready(function ($) {
;(function() {
function Centerify(elem, options) {
var self = this;
self.$elem = $(elem);
self.$sections = self.$elem.children('section');
self.isAnimating = false;
self.bodyAndHeadEl = $('body');
self.count = self.$sections.length;
self.speed = 100;
self.wait = 500;
init();
function init() {
onResize();
}
function onResize() {
self.windowHeight = $(window).height();
}
function centerOnSegment(percentage) {
if (!percentage) {
return;
}
if (self.isAnimating) {
return;
}
var done = function done() {
self.isAnimating = false;
$(window).off('scroll', scrollEvent);
$(window).unbind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', scrollEvent);
if (self.bodyAndHeadEl.get(0).scrollTop === 0) {
return;
}
};
var scrollEvent = function scrollEvent(e) {
if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
self.bodyAndHeadEl.stop();
done();
}
};
$(window).bind('scroll mousedown wheel DOMMouseScroll mousewheel keyup', scrollEvent);
clearTimeout(self.onScrollTimer);
self.isAnimating = true;
self.bodyAndHeadEl.stop().animate({
scrollTop: (Math.round(percentage) * self.windowHeight)
}, self.speed, function () {
return done();
});
}
$(window).bind('scroll', function() {
clearTimeout(self.onScrollTimer);
self.onScrollTimer = setTimeout(function () {
var currentScroll = self.bodyAndHeadEl.scrollTop();
var currentPercentage = (currentScroll / self.windowHeight).toFixed(2);
centerOnSegment(currentPercentage);
}, self.wait);
});
}
$.fn.centerify = function(options) {
return this.each(function() {
if (!$(this).data('centerify'))
$(this).data('centerify', new Centerify(this, options));
});
};
})();
$('#index').centerify();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment