80 lines
2.4 KiB
JavaScript
Executable File
80 lines
2.4 KiB
JavaScript
Executable File
/*
|
|
* Project: Scrolly : parallax is easy as a matter of fact !
|
|
* Description: Based on jQuery boilerplate
|
|
* Author: Victor C. / Octave & Octave web agency
|
|
* Licence: MIT
|
|
*/
|
|
(function ( $, window, document, undefined ) {
|
|
// Create the defaults once
|
|
var pluginName = 'scrolly',
|
|
defaults = {
|
|
bgParallax: false
|
|
},
|
|
didScroll = false;
|
|
|
|
function Plugin( element, options ) {
|
|
this.element = element;
|
|
this.$element = $(this.element);
|
|
|
|
this.options = $.extend( {}, defaults, options) ;
|
|
|
|
this._defaults = defaults;
|
|
this._name = pluginName;
|
|
|
|
this.init();
|
|
}
|
|
|
|
Plugin.prototype.init = function () {
|
|
var self = this;
|
|
this.startPosition = this.$element.position().top;
|
|
this.offsetTop = this.$element.offset().top;
|
|
this.height = this.$element.outerHeight(true);
|
|
this.velocity = this.$element.attr('data-velocity');
|
|
this.bgStart = parseInt(this.$element.attr('data-fit'), 10);
|
|
|
|
$(document).scroll(function(){
|
|
self.didScroll = true;
|
|
});
|
|
|
|
setInterval(function() {
|
|
if (self.didScroll) {
|
|
self.didScroll = false;
|
|
self.scrolly();
|
|
}
|
|
}, 10);
|
|
};
|
|
|
|
Plugin.prototype.scrolly = function() {
|
|
var dT = $(window).scrollTop(),
|
|
wH = $(window).height(),
|
|
position = this.startPosition;
|
|
|
|
if(this.offsetTop >= (dT+wH)) {
|
|
this.$element.addClass('scrolly-invisible');
|
|
} else {
|
|
if(this.$element.hasClass('scrolly-invisible')){
|
|
position = this.startPosition + (dT + ( wH - this.offsetTop ) ) * this.velocity;
|
|
} else {
|
|
position = this.startPosition + dT * this.velocity;
|
|
}
|
|
}
|
|
// Fix background position
|
|
if(this.bgStart){ position = position + this.bgStart; }
|
|
|
|
if(this.options.bgParallax === true) {
|
|
this.$element.css({backgroundPosition: '50% '+position+'px'});
|
|
} else {
|
|
this.$element.css({top: position});
|
|
}
|
|
};
|
|
|
|
$.fn[pluginName] = function ( options ) {
|
|
return this.each(function () {
|
|
if (!$.data(this, 'plugin_' + pluginName)) {
|
|
$.data(this, 'plugin_' + pluginName, new Plugin( this, options ));
|
|
}
|
|
});
|
|
};
|
|
|
|
})(jQuery, window, document);
|