80 lines
2.4 KiB
JavaScript
80 lines
2.4 KiB
JavaScript
|
/*
|
||
|
* 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);
|