/// <reference path="../../plugins/gsap/TweenMax.min.js" />
/// <reference path="../../plugins/gsap/CSSRulePlugin.min.js" />
/// <reference path="../../plugins/customScroll/jquery.mousewheel.min.js" />
/// <reference path="../../plugins/customScroll/jquery.mCustomScrollbar.js" />
/// <reference path="../../plugins/jquery/jquery-1.8.3.min.js" />
/// <reference path="../../plugins/jquery/jquery-ui-1.10.0.min.js" />
/// <reference path="../../plugins/trimandfit/trimandfit.js" />
var config = function () {
function _init() {
/// <summary>Initialize content</summary>
TweenMax.to(map.tempFix, 1, {
css: {
height: 55
},
repeat: -1,
yoyo: true
});
// Set view port
TweenMax.set(map.view_port, {
opacity: 0,
onComplete: function () {
if (map.keyhole.length > 0) {
// Key hole specific handlers
handlers.keyhole();
// Starting page specific settings
tl.general.start().play();
}
else {
// Layer specific handlers
// Layer specific settings
}
// General handling
_onResize();
handlers.general();
_mouseMove();
}
});
}
function _loadContent(_route) {
// Set layer settings
TweenMax.set(map.layer, {
display: "block",
opacity: 0,
onComplete: function () {
map.layer.html("");
map.layer.load("" + routes[_route].url + " #" + _route + "", function () {
console.log("content is loaded!");
var $self = $(this),
$images = $self.find('img'),
imgCount = $images.length,
loadedCount = 0;
$images.on('load', function () {
if (++loadedCount === imgCount) {
handlers.layer(_route);
// Add general handlers
handlers.general();
}
});
if (imgCount !== 0) {
// Anyways after 5 seconds trigger content loaded
setTimeout(function () {
handlers.layer(_route);
// Add general handlers
handlers.general();
// Remove event listener
$images.off('load');
}, 5000);
} else {
//
handlers.layer(_route);
// Add general handlers
handlers.general();
}
});
}
})
}
function _mouseMove() {
// Track mouse position
$(document).mousemove(function (e) {
// Set global values
window.mouseXPos = e.pageX;
window.mouseYPos = e.pageY;
});
}
function _onResize() {
/// <summary>Initialize window.onresize</summary>
$(window).resize(function () {
setPositions();
});
}
function setPositions() {
/// <summary>Sets dynamic positions</summary>
update.keyhole();
update.sim_bg();
update.legs();
update.start_content();
}
var update = {
keyhole: function () {
if (map.keyhole.length > 0)
TweenMax.set(map.keyhole, {
top: -((375 - map.view_area.height()) / 2),
left: -((map.keyhole.width() - map.view_area.width()) / 2)
});
},
start_content: function () {
if ($("#start-content").length > 0)
TweenMax.set($("#start-content"), {
top: -((375 - $("#view-area").height()) / 2),
left: -(($("#start-content").width() - $("#view-area").width()) / 2)
});
},
sim_bg: function () {
TweenMax.set(map.sim_bg, {
top: -((map.sim_bg.height() - map.view_port.height()) / 2),
left: -((map.sim_bg.width() - map.view_port.width()) / 2)
});
},
legs: function () {
TweenMax.set(map.legs, {
bottom: -(map.view_area.offset().top)
});
}
}
// Main element map
var map = {
main_area: $("#main-area"),
view_port: $("#view-port"),
view_area: $("#view-area"),
layer: $("#layers"),
menu: $("#menu"),
legs: $("#legs"),
keyhole: $("#key-hole"),
sim_bg: $("#simulated-background"),
start_cont: $("#start-content"),
light_contur: $("#light-contur"),
middleT: $("#middle-text"),
tempFix: $("#tween-fix")
}
// Main event and function handlers
var handlers = {
keyhole: function () {
// Set light tween
var lightTw = tl.start.light();
map.light_contur.on("click tap", function () {
// Remove event listeners
map.light_contur.off();
// Start intro
tl.start.intro();
}).on("mouseenter mouseover", function () {
lightTw.play();
}).on("mouseleave mouseout", function () {
lightTw.reverse();
});
},
layer: function (_route) {
// Global settings
var global_settings = new TimelineMax({
paused: true,
onComplete: function () {
// Set show content
var showContent = new TimelineMax({
paused: true,
onStart: function () {
// If information layer is present
if ($("#information-content").length > 0) {
$(".text", "#information-content").mCustomScrollbar({
set_width: 436,
set_height: 357,
});
}
},
onComplete: function () {
// Reset middle text
tl.middle_text.reset();
}
});
// Middle text fadeOut
showContent.add(TweenMax.to(routes[_route].middle_text, 1, {
opacity: 0
}));
// Content fadeIn
showContent.add(TweenMax.to(map.layer, 1.5, {
opacity: 1
}));
// Launch
showContent.play();
}
});
// Settings foreach button
$.each(routes[_route].button_opt, function (index, item) {
var hitbox = $(".hitbox", item.id);
var text = $(".text", item.id);
var info = $(".info", item.id);
// Settings for route button
global_settings.set($(item.id), {
css: item.settings
});
// Declare info,text tweens
hitbox.animation = new tl.layers.route_hover(info, item.info, text, item.text);
// Set mouseeneter/mouseleave handlers
hitbox.on("mouseenter.route mouseover.route", function () {
hitbox.animation.play();
}).on("mouseleave.route mouseout.route", function () {
hitbox.animation.reverse();
}).on("click.route tap.route", function () {
// Disable animations
map.layer.find(".route-btn").each(function () {
$(this).off(".route");
});
});
});
// Set info's settings
global_settings.set($(".info"), {
opacity: 0
});
// Set rotation for gallery container if present
if (routes[_route].is_gallery)
global_settings.set($("#gallery-container"), {
css: {
rotation: routes[_route].gal_rotation
}
});
// Launch settings
global_settings.play();
},
menu: function () {
// Find all menu items
map.menu.find(".menu-item").each(function () {
// Set animation
var item_hover = new tl.menu.itemHover($(this).find(".title"), $(this).find(".icon"));
$(this).find("a.handler").on("mouseenter.action mouseover.action", function () {
// Animate current element
item_hover.play();
console.log("hovered");
}).on("mouseleave.action mouseout.action", function () {
// Reverse animation
item_hover.reverse();
});
// Set click event
$(this).find("a.handler").on("click.action tap.action", function () {
if (!$(this).hasClass("facebook") && !$(this).hasClass("twitter")) {
//Get routeName
var routeName = $(this).attr("data-menu-item");
// Remove all handlers
map.menu.find("a.handler").each(function () {
$(this).off(".action");
});
// Reverse hover
item_hover.reverse().eventCallback("onReverseComplete", function () {
// Show middle text
TweenMax.set(map.middleT, { display: "block" });
// Go to route
tl.menu.toRoute(routeName);
});
}
else {
item_hover.reverse();
}
})
});
},
general: function () {
// Disable clicks on menu items except facebook and twitter
$("a.handler", "#menu").on("click tap", function (e) {
if (!$(this).hasClass("facebook") && !$(this).hasClass("twitter"))
e.preventDefault();
});
// Disable clicks on route buttons
map.layer.find("a").each(function () {
$(this).on("click tap", function (e) {
e.preventDefault();
});
});
}
}
var main_colors = {
green: "#38A516",
red: "#CC081C",
blue: "#1619A5",
yellow: "#ddff1f",
fb: "#3b5a9b",
tw: "#3bcaff"
}
// Route settings
var routes = {
"start": {
url: "/",
opt: {
width: 816,
height: 816,
marginTop: -408,
marginLeft: -408,
rotation: "0_short"
}
},
"animals": {
is_gallery: true,
gal_rotation: 4,
arrow_color: main_colors.green,
button_opt: [
{
id: "#animals-start",
settings: {},
info: {
opacity: 1
},
text: {
opacity: 0
}
},
{
id: "#animals-contact",
settings: {
rotation: 13
},
info: {
left: 0,
opacity: 1
},
text: {}
},
{
id: "#animals-castle",
settings: {
rotation: 13
},
info: {
opacity: 1,
left: 0
},
text: {}
}
],
mt_rotation: 14,
middle_text: $("#animals-mt"),
start_position: function () { return staticRoute.animals(); },
ele: $(".animals", "#menu"),
url: "/i/zveri/",
opt: {
width: 3326,
height: 3326,
marginTop: -2100,
marginLeft: -1900,
rotation: "0_short"
}
},
"contact": {
is_gallery: false,
gal_rotation: 0,
arrow_color: main_colors.red,
button_opt: [
{
id: "#contact-start",
settings: {
rotation: -85
},
info: {
opacity: 1
},
text: {
opacity: 0
}
},
{
id: "#contact-information",
settings: {
rotation: 5
},
info: {
top: 19,
opacity: 1
},
text: {
opacity: 0
}
}
],
mt_rotation: 4,
middle_text: $("#contact-mt"),
start_position: function () { return staticRoute.contact(); },
ele: $(".contact", "#menu"),
url: "/kontakti/",
opt: {
width: 3326,
height: 3326,
marginTop: -900,
marginLeft: -1480,
rotation: "80_short"
}
},
"information": {
is_gallery: false,
gal_rotation: 0,
arrow_color: main_colors.red,
button_opt: [
{
id: "#information-start",
settings: {
rotation: 9
},
info: {
opacity: 1
},
text: {}
},
{
id: "#information-hippy",
settings: {
rotation: 55
},
info: {
left: 115,
opacity: 1
},
text: {}
},
{
id: "#information-masks",
settings: {
rotation: 14
},
info: {
opacity: 1
},
text: {
opacity: 0
}
},
{
id: "#information-animals",
settings: {
rotation: 3
},
info: {
opacity: 1
},
text: {
opacity: 0
}
}
],
mt_rotation: 12,
middle_text: $("#information-mt"),
start_position: function () { return staticRoute.information(); },
ele: $(".information", "#menu"),
url: "/informacija/",
opt: {
width: 3326,
height: 3326,
marginTop: -1445,
marginLeft: -1680,
rotation: "-5_short"
}
},
"castle": {
is_gallery: true,
gal_rotation: 10,
arrow_color: main_colors.red,
button_opt: [
{
id: "#castle-start",
settings: {
rotation: -76
},
info: {
opacity: 1
},
text: {}
},
{
id: "#castle-zuj",
settings: {
rotation: 16
},
info: {
opacity: 1
},
text: {
opacity: 0
}
},
{
id: "#castle-masks",
settings: {
rotation: 20
},
info: {
opacity: 1
},
text: {
opacity: 0
}
}
],
mt_rotation: 14,
middle_text: $("#castle-mt"),
start_position: function () { return staticRoute.castle(); },
ele: $(".castle", "#menu"),
url: "/i/pasaku-teli/",
opt: {
width: 3326,
height: 3326,
marginTop: -866,
marginLeft: -1560,
rotation: "-95_short"
}
},
"masks": {
is_gallery: true,
gal_rotation: -15,
arrow_color: main_colors.yellow,
button_opt: [
{
id: "#masks-start",
settings: {
rotation: -13.5
},
info: {
opacity: 1
},
text: {
opacity: 0
}
},
{
id: "#masks-dress",
settings: {
rotation: -16
},
info: {
opacity: 1
},
text: {
opacity: 0
}
},
{
id: "#masks-abstract",
settings: {
rotation: -14
},
info: {
opacity: 1,
top: 70
},
text: {
}
}
],
mt_rotation: 0,
middle_text: $("#masks-mt"),
start_position: function () { return staticRoute.masks(); },
ele: $(".masks", "#menu"),
url: "/i/maskas-un-cepures/",
opt: {
width: 3326,
height: 3326,
marginTop: -873,
marginLeft: -1833,
rotation: "-32_short"
}
},
"abstract": {
is_gallery: true,
gal_rotation: 18,
arrow_color: main_colors.blue,
button_opt: [
{
id: "#abstract-start",
settings: {
rotation: 8
},
info: {
opacity: 1,
top: 70
},
text: {}
},
{
id: "#abstract-information",
settings: {
rotation: 11
},
info: {
opacity: 1,
left: 212
},
text: {}
},
{
id: "#abstract-castle",
settings: {
rotation: 9
},
info: {
opacity: 1,
left: -30
},
text: {}
}
],
mt_rotation: 8,
middle_text: $("#abstract-mt"),
start_position: function () { return staticRoute.abstract(); },
ele: $(".abstract", "#menu"),
url: "/i/abstrakti-teli/",
opt: {
width: 3326,
height: 3326,
marginTop: -2637,
marginLeft: -923,
rotation: "-180_short"
}
},
"hippy": {
is_gallery: true,
gal_rotation: 18,
arrow_color: main_colors.green,
button_opt: [
{
id: "#hippy-start",
settings: {
rotation: -7
},
info: {
opacity: 1
},
text: {
opacity: 0
}
},
{
id: "#hippy-contact",
settings: {
rotation: -8
},
info: {
opacity: 1,
top: 65
},
text: {}
},
{
id: "#hippy-abstract",
settings: {
rotation: -6
},
info: {
opacity: 1,
left: -167
},
text: {
opacity: 0
}
}
],
mt_rotation: -8,
middle_text: $("#hippy-mt"),
start_position: function () { return staticRoute.hippy(); },
ele: $(".hippy", "#menu"),
url: "/i/raksturlomas/",
opt: {
width: 3326,
height: 3326,
marginTop: -2100,
marginLeft: -1100,
rotation: "-110_short"
}
},
"dress": {
is_gallery: true,
gal_rotation: 18,
arrow_color: main_colors.red,
button_opt: [
{
id: "#dress-start",
settings: {
rotation: 7
},
info: {
opacity: 1
},
text: {
opacity: 0
}
},
{
id: "#dress-animals",
settings: {
rotation: 2
},
info: {
opacity: 1
},
text: {
opacity: 0
}
},
{
id: "#dress-hippy",
settings: {
rotation: 7
},
info: {
opacity: 1
},
text: {
opacity: 0
}
}
],
mt_rotation: 5,
middle_text: $("#dress-mt"),
start_position: function () { return staticRoute.dress(); },
ele: $(".dress", "#menu"),
url: "/i/vakarterpi/",
opt: {
width: 3326,
height: 3326,
marginTop: -850,
marginLeft: -785,
rotation: "-10_short"
}
},
"zuj": {
is_gallery: true,
gal_rotation: 18,
arrow_color: main_colors.blue,
button_opt: [
{
id: "#zuj-start",
settings: {
rotation: 7
},
info: {
opacity: 1,
left: -82
},
text: {
opacity: 0
}
},
{
id: "#zuj-dress",
settings: {
rotation: -75
},
info: {
opacity: 1,
top: -44
},
text: {
opacity: 0
}
},
{
id: "#zuj-information",
settings: {
rotation: 11
},
info: {
opacity: 1,
top: 56
},
text: {
opacity: 0
}
}
],
mt_rotation: 12,
middle_text: $("#zuj-mt"),
start_position: function () { return staticRoute.zuj(); },
ele: $(".zuj", "#menu"),
url: "/i/ziemassvetki-un-jaunais-gads/",
opt: {
width: 3326,
height: 3326,
marginTop: -916,
marginLeft: -1442,
rotation: "0_short"
}
}
}
// Tweens and Timelines and CSS Settings
var tl = {
start: {
intro: function () {
var _self = new TimelineMax({
onComplete: function () {
// Set menu
TweenMax.set(map.menu, {
display: "block",
onComplete: function () {
// Menu handlers
handlers.menu();
// Fade in menu
tl.menu.fadeIn();
}
})
}
});
// Fade out start content
_self.add([
TweenMax.to(map.start_cont, 1, {
opacity: 0,
onComplete: function () {
map.start_cont.remove();
}
})
]);
// Go in to hole
_self.add([
// Keyhole expand and remove
TweenMax.to(map.keyhole, 2, {
ease: 'Expo.easeIn',
width: 8645,
height: 8000,
left: -((8645 - $("#view-area").width()) / 2),
top: -((8000 - $("#view-area").height()) / 2),
onComplete: function () {
TweenMax.to(map.keyhole, 0.8, {
opacity: 0,
onComplete: function () {
map.keyhole.remove();
}
})
}
}),
// Simulated background fullscreen
TweenMax.to(map.sim_bg, 2.7, {
ease: 'Expo.easeInOut',
width: "100%",
height: "100%",
top: 0,
left: 0
}),
// Main area to start position
TweenMax.to(map.main_area, 2.7, {
ease: 'Expo.easeInOut',
css: {
marginTop: -408,
marginLeft: -408,
width: 816,
height: 816
}
})
]);
return _self;
},
light: function () {
return TweenMax.to(map.light_contur, 1, {
opacity: 1,
paused: true
});
}
},
menu: {
fadeIn: function () {
var _self = new TimelineMax();
_self.add([
TweenMax.staggerTo(map.menu.find(".menu-item"), 0.8, {
opacity: 1
}, 0.1)
]);
return _self;
},
reset: function () {
var _self = new TimelineMax();
_self.set(map.menu.find(".title"), {
scale: 0,
opacity: 0
}).set(map.menu.find(".icon"), {
scale: 1,
opacity: 1
}).set(map.menu.find(".menu-item"), {
opacity: 0
});
return _self;
},
itemHover: function (_thisTitle, _thisIcon) {
var _self = new TimelineMax({
paused: true
});
_self.add([
TweenMax.to(_thisTitle, 0.5, {
opacity: 1,
scale: 1
}),
TweenMax.to(_thisIcon, 0.5, {
opacity: 0,
scaleX: 2,
scaleY: 0
})
]);
return _self;
},
toRoute: function (_routeName) {
var _self = new TimelineMax({
onComplete: function () {
console.log("toRoute is complete!");
// Hide menu and reset button state
TweenMax.set(map.menu, {
display: "none",
onComplete: function () {
console.log("map to none is complete!");
tl.menu.reset().eventCallback("onComplete", function () {
console.log("menu reset is complete!");
// Load content for layer
_loadContent(_routeName);
});
}
})
}
});
var middleText = routes[_routeName].middle_text;
// Fade out menu
_self.add(TweenMax.to(map.menu.find(".menu-item"), 1, {
opacity: 0
}));
// Show middle text for route
_self.add(TweenMax.to(middleText, 1, {
opacity: 1
}), "0.4");
// Start animating main area with middle text
_self.add([
TweenMax.to(middleText, 2, {
ease: "Back.easeOut",
css: {
scale: 2,
rotation: routes[_routeName].mt_rotation
}
}),
TweenMax.to(map.main_area, 2, {
ease: "Back.easeOut",
css: routes[_routeName].opt
})
])
}
},
layers: {
route_hover: function (_thisTitle,_thisTitle_opt,_thisText,_thisText_opt) {
var _self = new TimelineLite({
paused: true
});
_self.add([
TweenMax.to(_thisTitle, 0.5, _thisTitle_opt),
TweenMax.to(_thisText, 0.5, _thisText_opt)
]);
return _self;
}
},
middle_text: {
reset: function () {
return TweenMax.set(map.middleT.find("img"), {
rotation: 0
});
}
},
main_area: {
},
general: {
start: function () {
var _self = new TimelineMax({
paused: true,
onComplete: function () {
// Show view port
tl.general.viewPortFadeIn().eventCallback("onComplete", function () {
tl.general.warningSign();
});
}
});
// Set starting page css settings
_self.set(map.view_port, {
display: "block"
});
_self.set(map.light_contur, {
opacity: 0
}).set($(".warning"), {
opacity: 0
}).set(map.keyhole, {
left: -((map.keyhole.width() - map.view_area.width()) / 2),
top: -((map.keyhole.height() - map.view_area.height()) / 2)
}).set(map.start_cont, {
left: -((map.start_cont.width() - map.view_area.width()) / 2),
top: -((map.start_cont.height() - map.view_area.height()) / 2)
}).set(map.sim_bg, {
left: -((map.sim_bg.width() - map.view_port.width()) / 2),
top: -((map.sim_bg.height() - map.view_port.height()) / 2)
}).set(map.legs, {
bottom: -((map.view_port.height() - 665) / 2)
}).set(map.middleT.find("img"), {
opacity: 0
}).add(tl.menu.reset());
return _self;
},
viewPortFadeIn: function () {
return TweenMax.to(map.view_port, 0.8, {
opacity: 1
});
},
warningSign: function () {
return TweenMax.to($(".warning"), 1, {
opacity: 1,
delay: 3
});
}
}
}
// Layer static route coordinates
var staticRoute = {
dress: function () {
return TweenMax.set($("#main-area"), {
css: {
width: 3326,
height: 3326,
marginTop: -850,
marginLeft: -785,
rotation: -10
}
});
},
hippy: function () {
return TweenMax.set($("#main-area"), {
css: {
width: 3326,
height: 3326,
marginTop: -2100,
marginLeft: -1100,
rotation: -110
}
});
},
abstract: function () {
return TweenMax.set($("#main-area"), {
css: {
width: 3326,
height: 3326,
marginTop: -2637,
marginLeft: -923,
rotation: -180
}
});
},
zuj: function () {
return TweenMax.set($("#main-area"), {
css: {
width: 3326,
height: 3326,
marginTop: -916,
marginLeft: -1442,
rotation: 0
}
});
},
information: function () {
return TweenMax.set($("#main-area"), {
css: {
width: 3326,
height: 3326,
marginTop: -1445,
marginLeft: -1680,
rotation: -5
}
});
},
masks: function () {
return TweenMax.set($("#main-area"), {
css: {
width: 3326,
height: 3326,
marginTop: -873,
marginLeft: -1833,
rotation: -32
}
});
},
contact: function () {
return TweenMax.set($("#main-area"), {
css: {
width: 3326,
height: 3326,
marginTop: -900,
marginLeft: -1480,
rotation: 80
}
});
},
animals: function () {
return TweenMax.set($("#main-area"), {
css: {
width: 3326,
height: 3326,
marginTop: -2100,
marginLeft: -1900,
rotation: 0
}
});
},
castle: function () {
return TweenMax.set($("#main-area"), {
css: {
width: 3326,
height: 3326,
marginTop: -866,
marginLeft: -1560,
rotation: -95
}
});
}
}
// Globals
var globals = {
menu_item_hover_complete: true,
route_btn_hover_complete: true
}
// Return initiation
return {
"init": function () { _init(); }
}
}();
$(window).load(function () {
// Initialize site
config.init();
});
!
