/**
* Author: H-art
* File principale con motore grafico parallasse
*/
function isEven(value) {
return (value%2 == 0);
}
var LE = {
// UTILITY VARIABLES
debug: /*(!$('html').hasClass('touch'))*/ true,
scroll_top: 0,
current_world: {}, // mondo corrente, mondo + percentuale
stages_height: [], // vettore delle altezze
// METHODS
init: function () {
// JQUERY OBJECT CACHE
LE.$window = $(window);
LE.$document = $(document);
LE.$cnt = $('#cnt');
LE.$stages_container = $('#lightexposure #stages_container');
LE.$backgrounds = $('#backgrounds div'); // tutti gli sfondi
LE.$model_containers = $('.stage div'); // contenitore dei modellini
LE.$bodyhtml = $('body, html'); // usato per scroll_to
LE.$stages_bg = $('#lightexposure .stage-bg'); // tutti i layer di sfondo
LE.$stages = $('#lightexposure #stages_container .stage'); // tutti i mondi
LE.$stages_inner_container = $('#stages_inner_container');
LE.$debug = $('#lightexposure #debug');
LE.$about = $('#lightexposure #about');
LE.$footer = $('#footer');
LE.$effect = $('#lightexposure #effect');
LE.IS_IE7 = ($.browser.msie && (parseInt($.browser.version) == 7));
LE.zero_left = LE.get_zero_left();
LE.stage_count = $('.stage').length; // numero di mondi
// aggiorna soglia di posizionamento "about"
LE.about_threshold = (LE.$window.height() - (LE.$stages_inner_container.height() - LE.scroll_top));
// end JQUERY OBJECT CACHE
// altezza layer di sfondo, vedi evento resize
LE.set_bg_stages_height();
// crea il vettore delle altezze degli stage
//LE.stages_height = LE.get_stages_height();
LE.stages_height = [
{ 'top': 0, 'low': 649 },
{ 'top': 650, 'low': 1699 },
{ 'top': 1700, 'low': 2749 },
{ 'top': 2750, 'low': 3799 },
{ 'top': 3800, 'low': 4849 },
{ 'top': 4850, 'low': 5899 }
];
LE.krooley_objects = {
$detail: $('#krooley_detail'),
$logo: $('#lightexposure-logo'),
$menu: $('#main-menu')
};
// recupera mondo corrente
LE.current_world = LE.get_world();
LE.log_values();
},
// imposta altezza contenitore sfondi
set_bg_stages_height: function () {
LE.$stages_bg.height(LE.$window.height());
},
log_values: function () {
if (LE.debug) {
LE.$debug.html(
'Scrolltop: '
+ LE.scroll_top + ' World: '
+ LE.current_world.world
+ ' Percent: '
+ Math.ceil(LE.current_world.percent * 100) + '%'
+ ' Altezza finestra: '
+ LE.$window.height()
+ ' Soglia: '
+ LE.about_threshold
);
}
},
/**
* fade degli sfondi per mostrare
* in sequenza da piu' scuro a piu' chiaro
*/
fade_bg: function () {
// imposta opacita' 0 per tutti i mondi
// che mi stanno sopra
if (LE.current_world.world > 0) {
// ignora per il primo mondo
for (var i = 0; i < LE.current_world.world; i++) {
LE.$stages_bg.eq(i).css({
opacity: 0
});
}
}
// ignora fade per ultimo mondo e primo (il primo e' la splash)
if (LE.current_world.world < (LE.stage_count - 1)) {
LE.$stages_bg.eq(LE.current_world.world).css({
opacity: (1 - LE.current_world.percent)
});
}
},
/**
* Scroll animato ad un mondo
*/
scroll_to: function (index) {
LE.$stages_container.stop(true, true).animate({
scrollTop: LE.stages_height[index].top
}, 2000);
},
/**
* Costruisce il vettore delle altezze dei
* mondi. Serve per recuperare il mondo
* corrente e la percentuale di avanzamento
* i.e. [{0, 600}, {600, 750}, {750, 1500}]
*/
get_stages_height: function () {
var values = Array();
var prev = 0;
LE.$stages.each(function () {
var t = $(this);
values.push({
top: prev,
low: ((prev + t.height()) - 1)
});
prev = (prev + t.height());
});
return values;
},
/**
* Ritorna in ogni istante l'indice del mondo
* corrente e a che percentuale del mondo mi trovo
*/
get_world: function () {
var world_index,
world_percent = LE.scroll_top;
// calcola indice mondo
for (var i = 0; i < LE.stages_height.length; i++) {
if ((LE.scroll_top >= LE.stages_height[i].top) && (LE.scroll_top <= LE.stages_height[i].low)) {
world_index = i;
break;
}
}
// calcola percentuale
world_percent = (world_percent - LE.stages_height[i].top) / (LE.stages_height[i].low - LE.stages_height[i].top);
return {world: world_index, percent: world_percent};
},
animate_objects: function () {
var w = LE.current_world.world;
var y = LE.current_world.percent;
// se il mondo non ha oggetto da animare, esci
if (LE.parallax_film.worlds[w] === undefined) { return false; }
// LE.parallax_film.worlds[w] e' definito
for (var i in LE.parallax_film.worlds[w].objects) {
var id = LE.parallax_film.worlds[w].objects[i].id;
for (var j in LE.parallax_film.worlds[w].objects[i].effects) {
var effect = LE.parallax_film.worlds[w].objects[i].effects[j];
var from = effect.range[0],
to = effect.range[1],
css = effect.css;
// sono nel range?
if ((LE.current_world.percent >= from) && (LE.current_world.percent <= to)) {
// fai scrollare oggetti dell'ultimo mondo
// per mostrare footer
if (LE.about_threshold >= 52) {
$('#krooley_denim').css({top: (52 - LE.about_threshold)});
$('#krooley_model_img').css({top: (30 + (52 - LE.about_threshold))});
LE.krooley_objects.$logo.css({top: (52 - LE.about_threshold)});
LE.krooley_objects.$menu.css({top: (52 - LE.about_threshold)});
LE.krooley_objects.$detail.css({top: (425 + (52 - LE.about_threshold))});
}
else {
LE.krooley_objects.$detail.css({top: 425});
LE.krooley_objects.$logo.css({top: 0});
LE.krooley_objects.$menu.css({top: 0});
$(id).css(css);
}
}
else {
// sono nel mondo giusto,
// ma in nessun intervallo definito!
}
}
}
// posiziona il pulsante "about"
LE.about_position();
},
about_position: function () {
if (LE.about_threshold >= 52) {
LE.$about.css({'bottom': (LE.about_threshold - 52)});
}
else {
LE.$about.css({'bottom': 0});
}
},
get_zero_left: function () {
var left = Math.floor((LE.$window.width() - LE.$stages_inner_container.width()) / 2);
if (left > 0) {
return left - 7;
}
else {
return 0;
}
}
// end METHODS
};
$(function () {
LE.init();
// EVENT BIND
LE.$stages_container.scroll(function (e) {
// update scroll top
LE.scroll_top = LE.$stages_container.scrollTop();
// update mondo corrente
LE.current_world = LE.get_world();
// aggiorna soglia di posizionamento "about"
LE.about_threshold = (LE.$window.height() - (LE.$stages_inner_container.height() - LE.scroll_top));
// leggi configurazione parallasse
LE.parallax_film = lightexposure_parallax_config();
LE.animate_objects();
if (!$('html').hasClass('touch')) {
LE.fade_bg();
// muove gli sfondi per effetto parallasse
if(LE.current_world.world > 0) {
LE.$backgrounds.each(function () {
$(this).css({'background-position': ("center " + ((-LE.scroll_top+650) / 70) + 'px')});
});
}
else {
$(this).css({'background-position': ("center 0")});
}
}
LE.log_values();
});
LE.$window.resize(function () {
// ridimensiona footer se IE7
if (LE.IS_IE7) { LE.$footer.width(LE.$window.width()-17); }
LE.set_bg_stages_height();
LE.zero_left = LE.get_zero_left();
LE.$cnt.height(LE.$window.height() - 52); // 52 == padding top per sticky header!
// aggiorna soglia di posizionamento "about" e posiziona il pulsante "about"
LE.about_threshold = (LE.$window.height() - (LE.$stages_inner_container.height() - LE.scroll_top));
LE.about_position();
LE.log_values();
});
// end EVENT BIND
});