141 lines
4.4 KiB
JavaScript
141 lines
4.4 KiB
JavaScript
/* detect touch */
|
|
if("ontouchstart" in window){
|
|
document.documentElement.className = document.documentElement.className + " touch";
|
|
}
|
|
if(!$("html").hasClass("touch")){
|
|
/* background fix */
|
|
$(".parallax").css("background-attachment", "fixed");
|
|
}
|
|
|
|
/* fix vertical when not overflow
|
|
call fullscreenFix() if .fullscreen content changes */
|
|
function fullscreenFix(){
|
|
var h = $('body').height();
|
|
// set .fullscreen height
|
|
$(".content-b").each(function(i){
|
|
if($(this).innerHeight() <= h){
|
|
$(this).closest(".fullscreen").addClass("not-overflow");
|
|
}
|
|
});
|
|
}
|
|
$(window).resize(fullscreenFix);
|
|
fullscreenFix();
|
|
|
|
if($(".px-bullets")){
|
|
|
|
$('.px-bullet').on('click', function(){
|
|
var image = 'url('+$(this).data('src')+')';
|
|
$('.px-bullet').removeClass('px-bullet-selected');
|
|
$(this).addClass('px-bullet-selected');
|
|
$('.parallax').fadeTo('slow', 0.1, function()
|
|
{
|
|
$(this).css('background-image', image);
|
|
}).fadeTo('slow', 1);
|
|
//$('.parallax').css('background-image', image).fadeTo('slow', 1);
|
|
|
|
});
|
|
|
|
}
|
|
/* resize background images */
|
|
function backgroundResize(){
|
|
var windowH = $(window).height();
|
|
var windowW = $(window).width();
|
|
$(".background").each(function(i){
|
|
var path = $(this);
|
|
// variables
|
|
var contW = path.width();
|
|
var contH = path.height();
|
|
var imgW = path.attr("data-img-width");
|
|
var imgH = path.attr("data-img-height");
|
|
|
|
var ratio = imgW / imgH;
|
|
|
|
var ratio2 = imgH / imgW;
|
|
// overflowing difference
|
|
var diff = parseFloat(path.attr("data-diff"));
|
|
diff = diff ? diff : 0;
|
|
// remaining height to have fullscreen image only on parallax
|
|
var remainingH = 0;
|
|
var remainingW = 0;
|
|
if(path.hasClass("parallax") && !$("html").hasClass("touch")){
|
|
|
|
var maxW = contW > windowW ? contW : windowW
|
|
var maxH = contH > windowH ? contH : windowH;
|
|
remainingH = windowH - contH;
|
|
remainingW = windowW - contW;
|
|
}
|
|
|
|
if(windowW > 1024){
|
|
imgW = contW + remainingW;
|
|
imgH = imgW * ratio2;
|
|
}else{
|
|
imgH = contH + remainingH;
|
|
imgW = imgH * ratio;
|
|
if(contW > imgW){
|
|
imgW = contW;
|
|
imgH = imgW / ratio;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
//
|
|
path.data("resized-imgW", imgW);
|
|
path.data("resized-imgH", imgH);
|
|
path.css("background-size", imgW + "px " + imgH + "px");
|
|
});
|
|
}
|
|
$(window).resize(backgroundResize);
|
|
$(window).focus(backgroundResize);
|
|
backgroundResize();
|
|
|
|
/* set parallax background-position */
|
|
function parallaxPosition(e){
|
|
var heightWindow = $(window).height();
|
|
var topWindow = $(window).scrollTop();
|
|
var bottomWindow = topWindow + heightWindow;
|
|
var currentWindow = (topWindow + bottomWindow) / 2;
|
|
|
|
$(".parallax").each(function(i){
|
|
var path = $(this);
|
|
var height = path.height();
|
|
var top = 150; //path.offset().top;
|
|
var bottom = top + height;
|
|
|
|
|
|
var diff = parseFloat(path.attr("data-diff"));
|
|
diff = diff ? diff : 0;
|
|
if(heightWindow < 1000){
|
|
diff = 200;
|
|
}
|
|
|
|
// only when in range
|
|
if(bottomWindow > top && topWindow < bottom){
|
|
var imgW = path.data("resized-imgW");
|
|
var imgH = path.data("resized-imgH");
|
|
// min when image touch top of window
|
|
var min = 0;
|
|
// max when image touch bottom of window
|
|
var max = - imgH + heightWindow;
|
|
// overflow changes parallax
|
|
var overflowH = height < heightWindow ? imgH - height : imgH - heightWindow; // fix height on overflow
|
|
top = top - overflowH;
|
|
bottom = bottom + overflowH;
|
|
// value with linear interpolation
|
|
var value = min + (max - min) * (currentWindow + top) / (bottom + top);
|
|
|
|
value = (value -diff);
|
|
// set background-position
|
|
var orizontalPosition = path.attr("data-oriz-pos");
|
|
orizontalPosition = orizontalPosition ? orizontalPosition : "50%";
|
|
$(this).css("background-position", orizontalPosition + " " + value + "px");
|
|
}
|
|
});
|
|
}
|
|
if(!$("html").hasClass("touch")){
|
|
$(window).resize(parallaxPosition);
|
|
//$(window).focus(parallaxPosition);
|
|
$(window).scroll(parallaxPosition);
|
|
parallaxPosition();
|
|
}
|
|
|