218 lines
3.5 KiB
JavaScript
218 lines
3.5 KiB
JavaScript
![]() |
/**
|
||
|
* Parallax
|
||
|
*
|
||
|
* Translate3d
|
||
|
* 1.0 | Muffin Group
|
||
|
*/
|
||
|
|
||
|
var mfnSetup = {
|
||
|
translate: null,
|
||
|
};
|
||
|
|
||
|
(function ($) {
|
||
|
/* globals jQuery */
|
||
|
|
||
|
'use strict';
|
||
|
|
||
|
/**
|
||
|
* mfnSetup
|
||
|
*/
|
||
|
|
||
|
// has3d
|
||
|
|
||
|
var has3d = function () {
|
||
|
if (!window.getComputedStyle) {
|
||
|
return false;
|
||
|
}
|
||
|
|
||
|
var el = document.createElement('div'),
|
||
|
has3d;
|
||
|
|
||
|
document.body.insertBefore(el, null);
|
||
|
|
||
|
if (el.style.transform !== undefined) {
|
||
|
el.style.transform = 'translate3d(1px,1px,1px)';
|
||
|
has3d = window.getComputedStyle(el).getPropertyValue('transform');
|
||
|
}
|
||
|
|
||
|
document.body.removeChild(el);
|
||
|
|
||
|
return (
|
||
|
has3d !== undefined &&
|
||
|
has3d !== null &&
|
||
|
has3d.length > 0 &&
|
||
|
has3d !== 'none'
|
||
|
);
|
||
|
};
|
||
|
|
||
|
// __construct
|
||
|
|
||
|
var __construct = function () {
|
||
|
if (has3d()) {
|
||
|
mfnSetup.translate = function (el, x, y) {
|
||
|
el.css('transform', 'translate3d(-' + x + ', ' + y + ', 0)');
|
||
|
};
|
||
|
} else {
|
||
|
mfnSetup.translate = function (el, x, y) {
|
||
|
el.css({
|
||
|
right: x,
|
||
|
top: y,
|
||
|
});
|
||
|
};
|
||
|
}
|
||
|
};
|
||
|
|
||
|
__construct();
|
||
|
})(jQuery);
|
||
|
|
||
|
(function ($) {
|
||
|
'use strict';
|
||
|
|
||
|
/**
|
||
|
* $.fn.mfnParallax
|
||
|
*/
|
||
|
|
||
|
$.fn.mfnParallax = function () {
|
||
|
var el = $(this),
|
||
|
parent = el.parent(),
|
||
|
speed = 500,
|
||
|
element,
|
||
|
parentPos,
|
||
|
windowH;
|
||
|
|
||
|
// imageSize
|
||
|
|
||
|
var imageSize = function (img) {
|
||
|
var w, h, l, t; // width, height, right, top
|
||
|
|
||
|
var imageW = img.get(0).naturalWidth;
|
||
|
var imageH = img.get(0).naturalHeight;
|
||
|
|
||
|
var parentW = img.parent().outerWidth();
|
||
|
var parentH = img.parent().outerHeight();
|
||
|
|
||
|
var windowH = $(window).height();
|
||
|
|
||
|
// fix for small sections
|
||
|
if (windowH > parentH) {
|
||
|
parentH = windowH;
|
||
|
}
|
||
|
|
||
|
var diff = imageW / parentW;
|
||
|
|
||
|
if (imageH / diff < parentH) {
|
||
|
w = imageW / (imageH / parentH);
|
||
|
h = parentH;
|
||
|
|
||
|
if (w > imageW) {
|
||
|
w = imageW;
|
||
|
h = imageH;
|
||
|
}
|
||
|
} else {
|
||
|
w = parentW;
|
||
|
h = imageH / diff;
|
||
|
}
|
||
|
|
||
|
l = (parentW - w) / 2;
|
||
|
t = (parentH - h) / 2;
|
||
|
|
||
|
return [w, h, l, t];
|
||
|
};
|
||
|
|
||
|
// parallax
|
||
|
|
||
|
var parallax = function () {
|
||
|
var scrollTop = $(window).scrollTop(),
|
||
|
scrollDiff,
|
||
|
ratio,
|
||
|
translateTop;
|
||
|
|
||
|
if (parentPos !== undefined) {
|
||
|
if (scrollTop >= parentPos.min && scrollTop <= parentPos.max) {
|
||
|
scrollDiff = scrollTop - parentPos.min;
|
||
|
ratio = scrollDiff / parentPos.height;
|
||
|
|
||
|
translateTop =
|
||
|
windowH +
|
||
|
ratio * speed -
|
||
|
scrollDiff -
|
||
|
speed * (windowH / parentPos.height);
|
||
|
|
||
|
mfnSetup.translate(
|
||
|
el,
|
||
|
element.right + 'px',
|
||
|
-Math.round(translateTop) + 'px'
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
// init
|
||
|
|
||
|
var init = function () {
|
||
|
windowH = $(window).height();
|
||
|
|
||
|
var initElement = function () {
|
||
|
var size = imageSize(el);
|
||
|
|
||
|
el.removeAttr('style').css({
|
||
|
width: size[0],
|
||
|
height: size[1],
|
||
|
});
|
||
|
|
||
|
mfnSetup.translate(el, size[2] + 'px', size[3] + 'px');
|
||
|
|
||
|
return {
|
||
|
width: size[0],
|
||
|
height: size[1],
|
||
|
right: size[2],
|
||
|
top: size[3],
|
||
|
};
|
||
|
};
|
||
|
|
||
|
element = initElement();
|
||
|
|
||
|
var initParent = function () {
|
||
|
var min = parent.offset().top - $(window).height();
|
||
|
var max = parent.offset().top + $(parent).outerHeight();
|
||
|
|
||
|
return {
|
||
|
min: min,
|
||
|
max: max,
|
||
|
height: max - min,
|
||
|
};
|
||
|
};
|
||
|
|
||
|
parentPos = initParent();
|
||
|
};
|
||
|
|
||
|
// reload
|
||
|
|
||
|
var reload = function () {
|
||
|
setTimeout(function () {
|
||
|
init();
|
||
|
parallax();
|
||
|
}, 50);
|
||
|
};
|
||
|
|
||
|
reload();
|
||
|
|
||
|
/**
|
||
|
* $(window).scroll
|
||
|
*/
|
||
|
|
||
|
$(window).on('scroll', parallax);
|
||
|
};
|
||
|
|
||
|
/**
|
||
|
* $(window).load
|
||
|
*/
|
||
|
|
||
|
$(window).on('load resize', function () {
|
||
|
if ($('.mfn-parallax').length) {
|
||
|
$('.mfn-parallax').each(function () {
|
||
|
$(this).mfnParallax();
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
})(jQuery);
|