137 lines
5.1 KiB
JavaScript
137 lines
5.1 KiB
JavaScript
theme.Parallax = function() {
|
|
|
|
function Parallax() {
|
|
this.load();
|
|
};
|
|
|
|
Parallax.prototype = $.extend({}, Parallax.prototype, {
|
|
load: function () {
|
|
$.widget( 'ui.parallax', {
|
|
options: {
|
|
ratio: 1.2
|
|
},
|
|
params: {},
|
|
_create: function() {
|
|
var _ = this;
|
|
|
|
this.params.start_width = this.element.width();
|
|
this.params.start_height = this.element.height();
|
|
this.params.start_ratio_height = this.params.start_height / this.params.start_width;
|
|
|
|
this._setOption('ratio', this.element.data('ratio'), true);
|
|
this._setOption('height', this.element.data('height'), true);
|
|
this._setOption('minHeight', this.element.data('min-height'), true);
|
|
|
|
if(this.options.height) {
|
|
var height_arr = this.options.height.split(',');
|
|
|
|
this.options.height = {
|
|
xs: height_arr[4],
|
|
sm: height_arr[3],
|
|
md: height_arr[2],
|
|
lg: height_arr[1],
|
|
xl: height_arr[0]
|
|
};
|
|
} else {
|
|
this.element.css({
|
|
paddingTop: _.params.start_ratio_height * 100 + '%'
|
|
});
|
|
}
|
|
|
|
if(this.options.minHeight) {
|
|
this.element.css({
|
|
minHeight: this.options.minHeight + 'px'
|
|
});
|
|
}
|
|
|
|
this.$content = this.element.children().first();
|
|
|
|
this._calculateSize();
|
|
this._calculatePosition();
|
|
|
|
this.element.css({
|
|
overflow: 'hidden',
|
|
position: 'relative'
|
|
});
|
|
|
|
this.$content.css({
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '50%',
|
|
transform: 'translateX(-50%)'
|
|
});
|
|
|
|
$window.on('theme.resize.parallax', function () {
|
|
_._calculateSize();
|
|
_._calculatePosition();
|
|
});
|
|
|
|
$window.on('scroll.parallax', function () {
|
|
_._calculatePosition();
|
|
});
|
|
|
|
this.element.addClass('parallax--init');
|
|
},
|
|
_calculateSize: function() {
|
|
this.params.current_width = this.element.width();
|
|
|
|
if(this.options.height) {
|
|
this.element.css({
|
|
paddingTop: this.options.height[theme.current.bp]
|
|
});
|
|
}
|
|
|
|
this.params.current_height = this.element.height();
|
|
|
|
this.params.current_scale_width = this.params.current_width * this.options.ratio;
|
|
this.params.current_scale_height = this.params.current_height * this.options.ratio;
|
|
|
|
this.params.stroke_scroll = this.params.current_height + window.innerHeight;
|
|
this.params.stroke_content = this.params.current_scale_height - this.params.current_height;
|
|
this.params.stroke_ratio = this.params.stroke_scroll / this.params.stroke_content;
|
|
|
|
this.$content.width(this.params.current_scale_width);
|
|
},
|
|
_calculatePosition: function() {
|
|
this.params.stroke_current = this.params.stroke_scroll - this.element[0].getBoundingClientRect().bottom;
|
|
|
|
this.params.stroke_current = Math.max(this.params.stroke_current, 0);
|
|
this.params.stroke_current = Math.min(this.params.stroke_current, this.params.stroke_scroll);
|
|
|
|
this.params.current_top = this.params.stroke_content * -1 + (this.params.stroke_current / this.params.stroke_ratio);
|
|
|
|
this.$content.css({
|
|
transform: 'translate(-50%, ' + this.params.current_top + 'px)'
|
|
});
|
|
},
|
|
_init: function () {
|
|
|
|
},
|
|
_setOption: function(key, value) {
|
|
$.Widget.prototype._setOption.apply(this, arguments);
|
|
},
|
|
destroy: function() {
|
|
$window.unbind('theme.resize.parallax scroll.parallax');
|
|
|
|
$.Widget.prototype.destroy.call(this);
|
|
}
|
|
});
|
|
},
|
|
init: function($parallax) {
|
|
if(!$parallax.hasClass('parallax--init')) {
|
|
$parallax.parallax();
|
|
}
|
|
},
|
|
destroy: function ($parallax) {
|
|
if($parallax.hasClass('parallax--init')) {
|
|
$parallax.parallax('destroy');
|
|
}
|
|
}
|
|
});
|
|
|
|
theme.Parallax = new Parallax;
|
|
};
|
|
|
|
$(function() {
|
|
theme.Parallax();
|
|
}); |