var $root = $(document.documentElement),
$window = $(window);
$root.attr("class", "js");
$(function() {
function animateLoader() {
var loader = $("#loader"),
loaderPos = 0;
setInterval(function() {
if (loaderPos == 12) loaderPos = 0;
loader.css("background-position", (loaderPos * -15) + "px 0");
loaderPos++;
}, 60);
}
function preload() {
var $works = $("section"),
postboxCompose = function() {
var postboxCompose = $works.eq(1),
emptyElt = $("<div/>");
postboxCompose.append($("<span/>", {
"class": "compose-area"
})).children().wrapAll(emptyElt.clone().addClass("wrap")).end().prepend(emptyElt.clone().addClass("shadow")).prepend(emptyElt.clone().addClass("gradient"));
},
kickoffTodos = function() {
var kickoffTodos = $works.eq(5),
emptyElt = $("<span/>");
kickoffTodos.prepend(emptyElt.clone().addClass("starsFront")).prepend(emptyElt.clone().addClass("starsMiddle")).prepend(emptyElt.clone().addClass("starsBack")).prepend(emptyElt.clone().addClass("bg")).append(emptyElt.clone().addClass("blur"));
},
thanks = function() {
var animBox = $works.eq(6).children("p").eq(0),
animImagesLength = 100;
function insertImg(src) {
var img = $("<img/>", {
alt: "",
src: "images/thanks/" + src + ".png"
})
img.appendTo(animBox);
}
for (var i = animImagesLength; i > -1; i--) insertImg(i);
};
postboxCompose();
kickoffTodos();
thanks();
};
animateLoader();
preload();
});
$window.load(function() {
// Helpers
var browserCSSPrefix = "",
animationEndEvent = "animationend";
if ($.browser.webkit) {
browserCSSPrefix = "-webkit-";
animationEndEvent = "webkitAnimationEnd";
} else if ($.browser.mozilla) browserCSSPrefix = "-moz-";
else if ($.browser.opera) browserCSSPrefix = "-o-";
var windowWidth = $root.width(),
windowHeight = $root.height(),
$style = $("<style/>").appendTo("head"),
$works = $("section"),
logo = $("h1"),
baseline = $("h2"),
reactiveClass = "reactive",
visibleClass = "visible",
hiddenClass = "hidden",
resizeScreenshot = function(screenshot) {
var windowWidth = $root.width(),
windowHeight = $root.height();
screenshotWidth = screenshot.width(), screenshotHeight = screenshot.height();
if (windowHeight < screenshotHeight) screenshot.css(
prefix("transform"), "scale(" + windowHeight / screenshotHeight + ")");
else if (windowWidth < screenshotWidth) screenshot.css(
prefix("transform"), "scale(" + windowWidth / screenshotWidth + ")");
else screenshot.css(prefix("transform"), "scale(1)");
},
prefix = function(obj) {
if (obj instanceof Object) {
var dict = obj,
newDict = {};
$.each(dict, function(key, value) {
newDict[prefix(key)] = value;
});
return newDict;
}
if (["transform", "animation", "animation-name", "animation-duration", "animation-timing-function", "animation-iteration-count", "animation-direction", "animation-delay"].indexOf(obj) > -1) obj = browserCSSPrefix + obj;
return obj;
},
insertCSSAnimation = function(name, properties) {
var anim = "@" + browserCSSPrefix + "keyframes " + name + " {\n";
$.each(properties, function(progress, props) {
anim += "\t" + progress + "% {\n";
$.each(props, function(key, value) {
anim += "\t\t" + key + ":" + value + ";\n";
})
anim += "\t" + "}\n";
})
anim += "}\n";
$style.append(anim);
};
// Works
function personal32pxSet() {
var personal32pxSet = $works.eq(0),
images = personal32pxSet.children("img");
function inAnim() {
personal32pxSet.addClass(visibleClass);
var animName = "inPersonal32pxSet";
insertCSSAnimation(animName, {
0: prefix({
"transform": "translateX(" + windowWidth + "px)"
}),
50: prefix({
"transform": "translateX(-20px)"
}),
100: prefix({
"transform": "translateX(0)"
})
});
images.css(prefix({
"transform": "translateX(" + windowWidth + "px)",
"animation": animName + " .8s cubic-bezier(.2,.6,.3,1)"
})).bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == animName) {
images.css(prefix("transform"), "translateX(0)");
$root.addClass(reactiveClass);
}
});
images.eq(0).css(prefix("animation-delay"), "1.2s");
images.eq(1).css(prefix("animation-delay"), "1.4s");
images.eq(2).css(prefix("animation-delay"), "1.6s");
images.eq(3).css(prefix("animation-delay"), "1.8s");
}
function outAnim() {
if (!$root.is("." + reactiveClass)) return;
$root.removeClass(reactiveClass);
var animName = "outPersonal32pxSet",
imagesLength = images.length;
insertCSSAnimation(animName, {
0: {},
100: prefix({
"transform": "translateX(-" + windowWidth + "px)"
})
});
images.each(function(i) {
var $this = images.eq(i),
animDelay = 0;
if (i == 1) animDelay = "08";
else if (i == 2) animDelay = "16";
else if (i == 3) animDelay = "24";
$this.css(
prefix("animation"), animName + " 1s cubic-bezier(.7,0,.6,.2) ." + animDelay + "s").bind(animationEndEvent, function() {
$this.addClass(hiddenClass);
if (i == imagesLength - 1) {
personal32pxSet.removeClass(visibleClass);
postboxCompose();
}
});
});
}
inAnim();
$root.click(outAnim);
};
function postboxCompose() {
var postboxCompose = $works.eq(1),
gradient = postboxCompose.children(".gradient"),
shadow = postboxCompose.children(".shadow"),
wrap = postboxCompose.children(".wrap");
postboxCompose.addClass(visibleClass);
$root.css("background", "#DF93BE");
logo.css("text-shadow", "0 1px 0 rgba(0,0,0,.35)");
baseline.css({
"color": "#5A3D51",
"text-shadow": "0 1px 0 rgba(255,255,255,.15)"
});
insertCSSAnimation("showGradient", {
0: prefix({
"opacity": "0",
"transform": "scale(1.2)"
}),
100: {}
});
insertCSSAnimation("showWindow", {
0: prefix({
"opacity": "0",
"transform": "scale(.3)"
}),
40: prefix({
"opacity": "0",
"transform": "scale(.3)"
}),
50: prefix({
"opacity": ".1",
"transform": "scale(1.05)"
}),
60: prefix({
"opacity": ".2",
"transform": "scale(.98)"
}),
70: prefix({
"opacity": ".3",
"transform": "scale(1.02)"
}),
100: {}
});
insertCSSAnimation("resizeShadow", {
0: prefix({
"opacity": "0",
"transform": "scaleY(.965) translateY(11px)"
}),
40: prefix({
"opacity": "0",
"transform": "scaleY(.965) translateY(11px)"
}),
68: prefix({
"transform": "scaleY(.965) translateY(11px)"
}),
100: {}
});
insertCSSAnimation("toolbarSlidesUp", {
0: prefix({
"transform": "translateY(21px)"
}),
80: prefix({
"transform": "translateY(21px)"
}),
100: {}
});
insertCSSAnimation("formatSlidesDown", {
0: prefix({
"transform": "translateY(-26px)"
}),
88: prefix({
"transform": "translateY(-26px)"
}),
100: {}
});
insertCSSAnimation("outWindow", {
0: {},
20: prefix({
"opacity": ".9",
"transform": "scale(1.05)"
}),
35: prefix({
"opacity": ".8",
"transform": "scale(1.05)"
}),
100: prefix({
"transform": "scale(.1)",
"opacity": "0"
})
});
insertCSSAnimation("outGradient", {
0: {},
100: prefix({
"opacity": "0",
"transform": "translateY(20px)"
})
});
gradient.css(
prefix("animation"), "showGradient .8s linear");
shadow.css(
prefix("animation"), "resizeShadow 3.5s ease-out");
wrap.css(
prefix("animation"), "showWindow 1.8s ease-in");
postboxCompose.find("[src*=toolbar]").css(
prefix("animation"), "toolbarSlidesUp 3s cubic-bezier(.2,.6,.3,1)");
postboxCompose.find("[src*=format]").css(
prefix("animation"), "formatSlidesDown 3.2s cubic-bezier(.2,.6,.3,1)");
postboxCompose.bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == "formatSlidesDown") {
$root.addClass(reactiveClass).click(function() {
gradient.css(
prefix("animation"), "outGradient .8s linear");
shadow.css(
prefix("animation"), "outWindow .8s cubic-bezier(.7,0,.6,.2)");
wrap.css(
prefix("animation"), "outWindow .8s cubic-bezier(.7,0,.6,.2)");
$root.removeClass(reactiveClass);
postboxCompose.bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == "outGradient") {
postboxCompose.removeClass(visibleClass);
postboxToolbarGlyphs();
}
});
});
}
});
$window.resize(function() {
resizeScreenshot(shadow);
resizeScreenshot(wrap);
});
};
function postboxToolbarGlyphs() {
var postboxToolbarGlyphs = $works.eq(2),
images = postboxToolbarGlyphs.children(),
inAnimName = "inPostboxToolbarGlyph",
outAnimName = "outPostboxToolbarGlyph";
postboxToolbarGlyphs.addClass(visibleClass);
$root.css("background", "#D0D0D0");
logo.css("text-shadow", "0 1px 0 rgba(0,0,0,.35)");
baseline.css({
"color": "#888",
"text-shadow": "0 1px 0 rgba(255,255,255,.3)"
});
var centerValue = parseInt(images.length / 2),
centerImage = images.eq(centerValue),
centerImageXPos = centerImage.position().left,
centerImageYPos = centerImage.position().top;
insertCSSAnimation("showCenterPostboxGlyph", {
0: prefix({
"opacity": "0",
"transform": "scale(2.5)"
}),
30: prefix({
"opacity": "0",
"transform": "scale(2.5)"
}),
50: prefix({
"transform": "scale(.6)"
}),
100: {}
});
centerImage.css(
prefix("animation"), "showCenterPostboxGlyph 2.2s cubic-bezier(.2,.6,.3,1)");
images.each(function(i) {
if (i == centerValue) return;
var $this = images.eq(i),
thisInAnimName = inAnimName + i,
thisInAnimDelay = 65 + (i / 1.5),
offsetX = (centerImageXPos - $this.position().left) + "px",
offsetY = (centerImageYPos - $this.position().top) + "px",
props = {
0: prefix({
"opacity": "0",
"transform": "translate(" + offsetX + "," + offsetY + ")"
}),
100: {}
};
props[thisInAnimDelay] = prefix({
"opacity": "0",
"transform": "translate(" + offsetX + "," + offsetY + ")"
});
insertCSSAnimation(thisInAnimName, props);
$this.css(
prefix("animation"), thisInAnimName + " 3s cubic-bezier(.2,.6,.3,1)");
});
postboxToolbarGlyphs.bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == inAnimName + (images.length - 1)) {
$root.addClass(reactiveClass).click(function() {
$root.removeClass(reactiveClass);
insertCSSAnimation(outAnimName, {
0: {},
20: prefix({
"transform": "scale(1.2)"
}),
100: prefix({
"opacity": "0",
"transform": "scale(.1)"
})
});
images.css(
prefix("animation"), outAnimName + " 1.2s cubic-bezier(.2,.6,.3,1)").eq(images.length - 1).bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == outAnimName) {
postboxToolbarGlyphs.removeClass(visibleClass);
postboxFolderIcons();
}
});
});
}
});
}
function postboxFolderIcons() {
var postboxFolderIcons = $works.eq(3),
images = postboxFolderIcons.children(),
imagesLength = images.length,
inAnimName = "inPostboxFolderIcons";
postboxFolderIcons.addClass(visibleClass);
$root.css("background", "#DCE1E7");
logo.css("text-shadow", "0 1px 0 #A4AFBE");
baseline.css({
"color": "#A4AFBE",
"text-shadow": "0 1px 0 rgba(255,255,255,.5)"
});
insertCSSAnimation(inAnimName, {
0: prefix({
"transform": "translateY(-" + windowHeight + "px)"
}),
94: prefix({
"transform": "translateY(8px)"
}),
100: prefix({
"transform": "translateY(0)"
})
});
function outAnim() {
var outAnimName = "outPostboxFolderIcons";
insertCSSAnimation(outAnimName, {
0: {},
40: prefix({
"transform": "translateY(-8px)"
}),
100: prefix({
"transform": "translateY(" + windowHeight + "px)"
})
});
images.each(function(i) {
var $this = images.eq(i);
$this.css(prefix({
"animation": outAnimName + " .8s cubic-bezier(.7,0,.6,.2) " + i / 15 + "s"
})).bind(animationEndEvent, function() {
$this.css(prefix("transform"), "translateY(" + windowHeight + "px)");
if (i == imagesLength - 1) {
postboxFolderIcons.removeClass(visibleClass);
kickoffBlankslateIcons();
}
});
});
$root.removeClass(reactiveClass);
};
images.each(function(i) {
var $this = images.eq(i);
$this.css(prefix({
"transform": "translateY(-" + windowHeight + "px)",
"animation": inAnimName + " 1.5s ease-in " + i / 15 + "s"
})).bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == inAnimName) {
$this.css(prefix("transform"), "translateY(0)");
if (i == imagesLength - 1) $root.addClass(reactiveClass).click(outAnim);
}
});
});
}
function kickoffBlankslateIcons() {
var kickoffBlankslateIcons = $works.eq(4),
icons = kickoffBlankslateIcons.children("img"),
inAnim = function() {
var iconSquaresNumber = 100,
iconSquareElt = $("<span/>", {
"class": "square"
}),
iconsSquaresWrap = $("<span/>", {
"class": "wrap"
}),
iconsNumber = icons.length,
animName = "inKickoffBlankslateIcons";
insertCSSAnimation(animName, {
0: prefix({
"opacity": "0",
"transform": "translateX(" + windowWidth + "px) scale(10) rotate(180deg)"
}),
50: prefix({
"opacity": ".5",
"transform": "translateX(-5px) scale(.5) rotate(-10deg)"
}),
100: {
"opacity": "1"
}
});
function styleBrand() {
$root.css("background", "#F6F7FA");
logo.css({
"color": "#000",
"text-shadow": "none"
});
baseline.css({
"color": "#ACB5CE",
"text-shadow": "0 1px 0 #fff"
});
}
function createParticles() {
var wrap = iconsSquaresWrap.clone(),
bg = $(this).attr("src");
for (var i = 0; i < iconSquaresNumber; i++) {
var x = (i % 10) * 25,
y = ~~ (i / 10) * 25;
iconSquareElt.clone().css(prefix({
"opacity": "0",
"background-image": "url(" + bg + ")",
"background-repeat": "no-repeat",
"background-position": "-" + x + "px -" + y + "px",
"animation": animName + " 2.8s cubic-bezier(.1,.8,.4,1) " + Math.random() + "s"
})).appendTo(wrap).bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == animName) {
$(this).css("opacity", "1");
}
});
};
kickoffBlankslateIcons.append(wrap);
}
function animListener(e) {
if (e.originalEvent.animationName == animName) {
$root.addClass(reactiveClass).click(outAnim);
$(this).unbind(animationEndEvent, animListener);
}
}
kickoffBlankslateIcons.addClass(visibleClass);
styleBrand();
icons.each(createParticles);
kickoffBlankslateIcons.bind(animationEndEvent, animListener);
},
outAnim = function() {
var animName = "outKickoffBlankslateIcons",
animDuration = 1200,
squares = kickoffBlankslateIcons.find(".square"),
delays = [];
insertCSSAnimation(animName, {
0: {},
100: prefix({
"opacity": "0",
"transform": "translateX(-" + windowWidth + "px) scale(.1) rotate(-300deg)"
})
});
function hideParticles() {
var $this = $(this),
delay = Math.random();
delays.push(delay);
$this.css(prefix({
"animation-name": animName,
"animation-duration": animDuration + "ms",
"animation-timing-function": "cubic-bezier(.7,0,.6,.2)",
"animation-delay": delay
})).bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == animName) $this.addClass(hiddenClass);
});
}
squares.each(hideParticles);
$root.removeClass(reactiveClass).unbind("click", outAnim);
setTimeout(function() {
kickoffBlankslateIcons.removeClass(visibleClass);
kickoffTodos();
}, animDuration + (delays.sort().pop() * 1000));
};
inAnim();
}
function kickoffTodos() {
var kickoffTodos = $works.eq(5),
screenshot = kickoffTodos.children("img"),
inAnim = function() {
var bg = kickoffTodos.children(".bg"),
starsBack = kickoffTodos.children(".starsBack"),
starsMiddle = kickoffTodos.children(".starsMiddle"),
starsFront = kickoffTodos.children(".starsFront"),
blur = kickoffTodos.children(".blur"),
stars = [starsBack, starsMiddle, starsFront],
starsLength = stars.length,
auroraAnimName = "inAuroraFadesIn",
starsAnimName = "inMoveStars",
screenshotAnimName = "inKickoffTodosWindow",
inBlurAnimName = "inKickoffTodosBlurWindow",
outBlurAnimName = "outKickoffTodosBlurWindow";
logo.css({
"color": "#fff",
"text-shadow": "0 1px 0 #000"
});
baseline.css({
"color": "#666E8A",
"text-shadow": "0 1px 0 #000"
});
kickoffTodos.addClass(visibleClass);
insertCSSAnimation(auroraAnimName, {
0: prefix({
"opacity": "0",
"transform": "scale(1.1) translateX(10px)"
}),
100: {}
});
insertCSSAnimation(starsAnimName, {
0: {
"opacity": "0"
},
2: prefix({
"opacity": "1",
"transform": "translateX(-160px)"
}),
4: prefix({
"opacity": ".2",
"transform": "translateX(-320px)"
}),
5: prefix({
"opacity": "1",
"transform": "translateX(-400px)"
}),
99: prefix({
"transform": "translateX(-8000px)"
}),
100: prefix({
"opacity": "0",
"transform": "translateX(-8000px)"
})
});
insertCSSAnimation(screenshotAnimName, {
0: {
"opacity": "0"
},
100: {}
});
insertCSSAnimation(inBlurAnimName, {
0: prefix({
"opacity": "0",
"transform": "scale(.96)"
}),
100: {
"opacity": ".7"
}
});
insertCSSAnimation(outBlurAnimName, {
0: {
"opacity": ".7"
},
100: {
"opacity": "0"
}
});
bg.css(prefix("animation"), auroraAnimName + " 1.5s ease-out").bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == auroraAnimName) $root.css("background", "#03092B");
});
for (var i = 0; i < starsLength; i++)
stars[i].css(prefix({
"animation-name": starsAnimName,
"animation-timing-function": "linear",
"animation-iteration-count": "infinite"
}));
starsFront.css(prefix("animation-duration"), "420s");
starsMiddle.css(prefix("animation-duration"), "660s");
starsBack.css(prefix("animation-duration"), "840s");
screenshot.addClass(hiddenClass);
blur.css(prefix({
"opacity": "0",
"animation": inBlurAnimName + " .4s ease-out 1.2s"
})).bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == inBlurAnimName) {
blur.css(prefix("animation"), outBlurAnimName + " 1s linear").bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == outBlurAnimName) {
blur.addClass(hiddenClass);
$root.addClass(reactiveClass).click(outAnim);
}
});
screenshot.css(prefix("animation"), screenshotAnimName + " .5s linear").removeClass(hiddenClass);
}
});
},
outAnim = function() {
var outGlobalAnimName = "outKickoffTodosGlobal",
outScreenshotAnimName = "outKickoffTodosScreenshot";
insertCSSAnimation(outGlobalAnimName, {
0: {},
100: {
"opacity": "0"
}
});
insertCSSAnimation(outScreenshotAnimName, {
0: {},
100: {
"opacity": "0"
}
});
kickoffTodos.css(
prefix("animation"), outGlobalAnimName + " 2.5s ease-out").bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == outGlobalAnimName) {
kickoffTodos.removeClass(visibleClass);
thanks();
}
});
screenshot.css(
prefix("animation"), outScreenshotAnimName + " 2s cubic-bezier(.2,.5,.3,1)").bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == outScreenshotAnimName) screenshot.addClass(hiddenClass);
});
$root.css("background", "#000").removeClass(reactiveClass);
};
inAnim();
$window.resize(function() {
resizeScreenshot(screenshot);
});
}
function thanks() {
var thanks = $works.eq(6),
inAnim = function() {
var gradient = $("<span/>", {
"class": "gradient"
}),
gradientAnimName = "inThanksGradient",
infoAnimName = "inThanksInfo",
copyright = thanks.children("p").eq(1),
lis = thanks.find("li"),
mail = lis.eq(0),
twitter = lis.eq(1),
info = [copyright, mail, twitter],
infoLength = info.length,
styleBrand = function() {
$root.css("background", "#000");
logo.css({
"color": "#fff",
"text-shadow": "0 1px 0 #000"
});
baseline.css({
"color": "#777",
"text-shadow": "0 1px 0 #000"
});
},
showInfo = function() {
for (var j = 0; j < infoLength; j++) {
info[j].css(
prefix("animation"), infoAnimName + " 1.2s cubic-bezier(.2,.5,.3,1)").bind(animationEndEvent, function(e) {
if (e.originalEvent.animationName == infoAnimName) $(this).css("opacity", 1);
});
};
mail.css(prefix("animation-delay"), ".4s");
twitter.css(prefix("animation-delay"), ".6s");
};
insertCSSAnimation(gradientAnimName, {
0: prefix({
"opacity": "0",
"transform": "scale(1.5)"
}),
100: {
"opacity": "1"
}
});
insertCSSAnimation(infoAnimName, {
0: prefix({
"opacity": "0",
"transform": "translateY(15px)"
}),
100: {
"opacity": "1"
}
});
gradient.css(
prefix("animation"), gradientAnimName + " 2s cubic-bezier(.2,.5,.3,1)");
for (var i = 0; i < infoLength; i++) {
info[i].css("opacity", 0);
};
var animImages = thanks.children("p").eq(0).children("img"),
i = 0,
animImagesLength = animImages.length - 1,
thanksAnim = setInterval(function() {
animImages.eq(i).remove();
i++;
if (i == animImagesLength) {
clearInterval(thanksAnim);
showInfo();
}
}, 30);
thanks.prepend(gradient).addClass(visibleClass);
styleBrand();
};
inAnim();
}
function removeLoader() {
var $loader = $("#loader"),
animName = "removeLoader";
insertCSSAnimation(animName, {
0: {},
10: prefix({
"transform": "scale(1.2)"
}),
15: prefix({
"transform": "scale(1.2)"
}),
100: prefix({
"transform": "scale(.1)",
"opacity": "0"
})
});
$loader.css(prefix("animation"), animName + " 1.5s cubic-bezier(.2,.6,.3,1)").bind(animationEndEvent, function() {
$loader.remove();
});
};
// Let the show begin
removeLoader();
personal32pxSet();
});
var $root = $(document.documentElement),
$window = $(window);
$root.attr("class","js");
$(function(){
function animateLoader() {
var loader = $("#loader"),
loaderPos = 0;
setInterval(function(){
if(loaderPos == 12)
loaderPos = 0;
loader.css("background-position", (loaderPos * -15) + "px 0");
loaderPos++;
}, 60);
}
function preload() {
var $works = $("section"),
postboxCompose = function() {
var postboxCompose = $works.eq(1),
emptyElt = $("<div/>");
postboxCompose
.append($("<span/>", {"class":"compose-area"}))
.children()
.wrapAll(emptyElt.clone().addClass("wrap"))
.end()
.prepend(emptyElt.clone().addClass("shadow"))
.prepend(emptyElt.clone().addClass("gradient"));
},
kickoffTodos = function() {
var kickoffTodos = $works.eq(5),
emptyElt = $("<span/>");
kickoffTodos
.prepend(emptyElt.clone().addClass("starsFront"))
.prepend(emptyElt.clone().addClass("starsMiddle"))
.prepend(emptyElt.clone().addClass("starsBack"))
.prepend(emptyElt.clone().addClass("bg"))
.append(emptyElt.clone().addClass("blur"));
},
thanks = function() {
var animBox = $works.eq(6).children("p").eq(0),
animImagesLength = 100;
function insertImg(src) {
var img = $("<img/>", {
alt:"",
src:"images/thanks/" + src + ".png"
})
img.appendTo(animBox);
}
for(var i = animImagesLength; i > -1; i--) insertImg(i);
};
postboxCompose();
kickoffTodos();
thanks();
};
animateLoader();
preload();
});
$window.load(function(){
// Helpers
var browserCSSPrefix = "",
animationEndEvent = "animationend";
if($.browser.webkit) {
browserCSSPrefix = "-webkit-";
animationEndEvent = "webkitAnimationEnd";
}
else if($.browser.mozilla)
browserCSSPrefix = "-moz-";
else if($.browser.opera)
browserCSSPrefix = "-o-";
var windowWidth = $root.width(),
windowHeight = $root.height(),
$style = $("<style/>").appendTo("head"),
$works = $("section"),
logo = $("h1"),
baseline = $("h2"),
reactiveClass = "reactive",
visibleClass = "visible",
hiddenClass = "hidden",
resizeScreenshot = function(screenshot){
var windowWidth = $root.width(),
windowHeight = $root.height();
screenshotWidth = screenshot.width(),
screenshotHeight = screenshot.height();
if(windowHeight < screenshotHeight)
screenshot.css(
prefix("transform"),"scale(" + windowHeight / screenshotHeight + ")"
);
else if(windowWidth < screenshotWidth)
screenshot.css(
prefix("transform"),"scale(" + windowWidth / screenshotWidth + ")"
);
else
screenshot.css(prefix("transform"),"scale(1)");
},
prefix = function(obj) {
if(obj instanceof Object) {
var dict = obj,
newDict = {};
$.each(dict,function(key , value) {
newDict[prefix(key)] = value;
});
return newDict;
}
if([
"transform",
"animation",
"animation-name",
"animation-duration",
"animation-timing-function",
"animation-iteration-count",
"animation-direction",
"animation-delay"
].indexOf(obj) > -1)
obj = browserCSSPrefix + obj;
return obj;
},
insertCSSAnimation = function(name, properties) {
var anim = "@" + browserCSSPrefix + "keyframes " + name + " {\n";
$.each(properties, function(progress, props) {
anim += "\t" + progress + "% {\n";
$.each(props,function(key , value) {
anim += "\t\t" + key + ":" + value + ";\n";
})
anim += "\t" + "}\n";
})
anim += "}\n";
$style.append(anim);
};
// Works
function personal32pxSet(){
var personal32pxSet = $works.eq(0),
images = personal32pxSet.children("img");
function inAnim(){
personal32pxSet.addClass(visibleClass);
var animName = "inPersonal32pxSet";
insertCSSAnimation(animName, {
0 : prefix({ "transform" : "translateX(" + windowWidth + "px)" }),
50 : prefix({ "transform" : "translateX(-20px)" }),
100 : prefix({ "transform" : "translateX(0)" })
});
images
.css(prefix({
"transform":"translateX(" + windowWidth + "px)",
"animation":animName + " .8s cubic-bezier(.2,.6,.3,1)"
}))
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == animName) {
images.css(prefix("transform"),"translateX(0)");
$root.addClass(reactiveClass);
}
});
images.eq(0).css(prefix("animation-delay"),"1.2s");
images.eq(1).css(prefix("animation-delay"),"1.4s");
images.eq(2).css(prefix("animation-delay"),"1.6s");
images.eq(3).css(prefix("animation-delay"),"1.8s");
}
function outAnim(){
if(!$root.is("." + reactiveClass)) return;
$root.removeClass(reactiveClass);
var animName = "outPersonal32pxSet",
imagesLength = images.length;
insertCSSAnimation(animName, {
0 : {},
100 : prefix({ "transform":"translateX(-" + windowWidth + "px)" })
});
images.each(function(i){
var $this = images.eq(i),
animDelay = 0;
if(i == 1) animDelay = "08";
else if(i == 2) animDelay = "16";
else if(i == 3) animDelay = "24";
$this
.css(
prefix("animation"),
animName + " 1s cubic-bezier(.7,0,.6,.2) ." + animDelay + "s"
)
.bind(animationEndEvent, function(){
$this.addClass(hiddenClass);
if(i == imagesLength - 1) {
personal32pxSet.removeClass(visibleClass);
postboxCompose();
}
});
});
}
inAnim();
$root.click(outAnim);
};
function postboxCompose(){
var postboxCompose = $works.eq(1),
gradient = postboxCompose.children(".gradient"),
shadow = postboxCompose.children(".shadow"),
wrap = postboxCompose.children(".wrap");
postboxCompose.addClass(visibleClass);
$root.css("background","#DF93BE");
logo.css("text-shadow","0 1px 0 rgba(0,0,0,.35)");
baseline.css({
"color":"#5A3D51",
"text-shadow":"0 1px 0 rgba(255,255,255,.15)"
});
insertCSSAnimation("showGradient", {
0 : prefix({
"opacity":"0",
"transform":"scale(1.2)"
}),
100 : {}
});
insertCSSAnimation("showWindow", {
0 : prefix({
"opacity":"0",
"transform":"scale(.3)"
}),
40 : prefix({
"opacity":"0",
"transform":"scale(.3)"
}),
50 : prefix({
"opacity":".1",
"transform":"scale(1.05)"
}),
60 : prefix({
"opacity":".2",
"transform":"scale(.98)"
}),
70 : prefix({
"opacity":".3",
"transform":"scale(1.02)"
}),
100 : {}
});
insertCSSAnimation("resizeShadow", {
0 : prefix({
"opacity":"0",
"transform":"scaleY(.965) translateY(11px)"
}),
40 : prefix({
"opacity":"0",
"transform":"scaleY(.965) translateY(11px)"
}),
68 : prefix({"transform":"scaleY(.965) translateY(11px)"}),
100 : {}
});
insertCSSAnimation("toolbarSlidesUp", {
0 : prefix({"transform":"translateY(21px)"}),
80 : prefix({"transform":"translateY(21px)"}),
100 : {}
});
insertCSSAnimation("formatSlidesDown", {
0 : prefix({"transform":"translateY(-26px)"}),
88 : prefix({"transform":"translateY(-26px)"}),
100 : {}
});
insertCSSAnimation("outWindow", {
0 : {},
20 : prefix({
"opacity":".9",
"transform":"scale(1.05)"
}),
35 : prefix({
"opacity":".8",
"transform":"scale(1.05)"
}),
100 : prefix({
"transform":"scale(.1)",
"opacity":"0"
})
});
insertCSSAnimation("outGradient", {
0 : {},
100 : prefix({
"opacity":"0",
"transform":"translateY(20px)"
})
});
gradient.css(
prefix("animation"), "showGradient .8s linear"
);
shadow.css(
prefix("animation"), "resizeShadow 3.5s ease-out"
);
wrap.css(
prefix("animation"), "showWindow 1.8s ease-in"
);
postboxCompose.find("[src*=toolbar]").css(
prefix("animation"), "toolbarSlidesUp 3s cubic-bezier(.2,.6,.3,1)"
);
postboxCompose.find("[src*=format]").css(
prefix("animation"), "formatSlidesDown 3.2s cubic-bezier(.2,.6,.3,1)"
);
postboxCompose.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == "formatSlidesDown") {
$root.addClass(reactiveClass).click(function(){
gradient.css(
prefix("animation"),"outGradient .8s linear"
);
shadow.css(
prefix("animation"),"outWindow .8s cubic-bezier(.7,0,.6,.2)"
);
wrap.css(
prefix("animation"),"outWindow .8s cubic-bezier(.7,0,.6,.2)"
);
$root.removeClass(reactiveClass);
postboxCompose.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == "outGradient") {
postboxCompose.removeClass(visibleClass);
postboxToolbarGlyphs();
}
});
});
}
});
$window.resize(function(){
resizeScreenshot(shadow);
resizeScreenshot(wrap);
});
};
function postboxToolbarGlyphs(){
var postboxToolbarGlyphs = $works.eq(2),
images = postboxToolbarGlyphs.children(),
inAnimName = "inPostboxToolbarGlyph",
outAnimName = "outPostboxToolbarGlyph";
postboxToolbarGlyphs.addClass(visibleClass);
$root.css("background","#D0D0D0");
logo.css("text-shadow","0 1px 0 rgba(0,0,0,.35)");
baseline.css({
"color":"#888",
"text-shadow":"0 1px 0 rgba(255,255,255,.3)"
});
var centerValue = parseInt(images.length / 2),
centerImage = images.eq(centerValue),
centerImageXPos = centerImage.position().left,
centerImageYPos = centerImage.position().top;
insertCSSAnimation("showCenterPostboxGlyph", {
0 : prefix({
"opacity":"0",
"transform":"scale(2.5)"
}),
30 : prefix({
"opacity":"0",
"transform":"scale(2.5)"
}),
50 : prefix({
"transform":"scale(.6)"
}),
100 : {}
});
centerImage.css(
prefix("animation"),
"showCenterPostboxGlyph 2.2s cubic-bezier(.2,.6,.3,1)"
);
images.each(function(i){
if(i == centerValue) return;
var $this = images.eq(i),
thisInAnimName = inAnimName + i,
thisInAnimDelay = 65 + (i/1.5),
offsetX = (centerImageXPos - $this.position().left) + "px",
offsetY = (centerImageYPos - $this.position().top) + "px",
props = {
0 : prefix({
"opacity":"0",
"transform":"translate(" + offsetX + "," + offsetY + ")"
}),
100 : {}
};
props[thisInAnimDelay] = prefix({
"opacity":"0",
"transform":"translate(" + offsetX + "," + offsetY + ")"
});
insertCSSAnimation(thisInAnimName, props);
$this.css(
prefix("animation"),
thisInAnimName + " 3s cubic-bezier(.2,.6,.3,1)"
);
});
postboxToolbarGlyphs.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == inAnimName + (images.length - 1)) {
$root.addClass(reactiveClass).click(function(){
$root.removeClass(reactiveClass);
insertCSSAnimation(outAnimName, {
0 : {},
20 : prefix({"transform":"scale(1.2)"}),
100 : prefix({
"opacity":"0",
"transform":"scale(.1)"
})
});
images
.css(
prefix("animation"),
outAnimName + " 1.2s cubic-bezier(.2,.6,.3,1)"
)
.eq(images.length - 1)
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == outAnimName) {
postboxToolbarGlyphs.removeClass(visibleClass);
postboxFolderIcons();
}
});
});
}
});
}
function postboxFolderIcons(){
var postboxFolderIcons = $works.eq(3),
images = postboxFolderIcons.children(),
imagesLength = images.length,
inAnimName = "inPostboxFolderIcons";
postboxFolderIcons.addClass(visibleClass);
$root.css("background","#DCE1E7");
logo.css("text-shadow","0 1px 0 #A4AFBE");
baseline.css({
"color":"#A4AFBE",
"text-shadow":"0 1px 0 rgba(255,255,255,.5)"
});
insertCSSAnimation(inAnimName, {
0 : prefix({"transform":"translateY(-" + windowHeight + "px)"}),
94 : prefix({"transform":"translateY(8px)"}),
100 : prefix({"transform":"translateY(0)"})
});
function outAnim() {
var outAnimName = "outPostboxFolderIcons";
insertCSSAnimation(outAnimName, {
0 : {},
40 : prefix({"transform":"translateY(-8px)"}),
100 : prefix({"transform":"translateY(" + windowHeight + "px)"})
});
images.each(function(i){
var $this = images.eq(i);
$this
.css(prefix({
"animation":outAnimName+" .8s cubic-bezier(.7,0,.6,.2) "+i/15+"s"
}))
.bind(animationEndEvent, function(){
$this.css(prefix("transform"),"translateY(" + windowHeight + "px)");
if(i == imagesLength - 1) {
postboxFolderIcons.removeClass(visibleClass);
kickoffBlankslateIcons();
}
});
});
$root.removeClass(reactiveClass);
};
images.each(function(i){
var $this = images.eq(i);
$this
.css(prefix({
"transform":"translateY(-" + windowHeight + "px)",
"animation":inAnimName + " 1.5s ease-in " + i/15 + "s"
}))
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == inAnimName) {
$this.css(prefix("transform"),"translateY(0)");
if(i == imagesLength - 1)
$root.addClass(reactiveClass).click(outAnim);
}
});
});
}
function kickoffBlankslateIcons(){
var kickoffBlankslateIcons = $works.eq(4),
icons = kickoffBlankslateIcons.children("img"),
inAnim = function(){
var iconSquaresNumber = 100,
iconSquareElt = $("<span/>", {"class":"square"}),
iconsSquaresWrap = $("<span/>", {"class":"wrap"}),
iconsNumber = icons.length,
animName = "inKickoffBlankslateIcons";
insertCSSAnimation(animName, {
0 : prefix({
"opacity":"0",
"transform":"translateX("
+ windowWidth
+ "px) scale(10) rotate(180deg)"
}),
50 : prefix({
"opacity":".5",
"transform":"translateX(-5px) scale(.5) rotate(-10deg)"
}),
100 : {"opacity":"1"}
});
function styleBrand(){
$root.css("background","#F6F7FA");
logo.css({
"color":"#000",
"text-shadow":"none"
});
baseline.css({
"color":"#ACB5CE",
"text-shadow":"0 1px 0 #fff"
});
}
function createParticles() {
var wrap = iconsSquaresWrap.clone(),
bg = $(this).attr("src");
for (var i=0; i < iconSquaresNumber; i++) {
var x = (i % 10) * 25,
y = ~~(i / 10) * 25;
iconSquareElt
.clone()
.css(prefix({
"opacity":"0",
"background-image":"url(" + bg + ")",
"background-repeat":"no-repeat",
"background-position":"-" + x + "px -" + y + "px",
"animation":animName
+ " 2.8s cubic-bezier(.1,.8,.4,1) "
+ Math.random()
+ "s"
}))
.appendTo(wrap)
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == animName) {
$(this).css("opacity","1");
}
});
};
kickoffBlankslateIcons.append(wrap);
}
function animListener(e) {
if(e.originalEvent.animationName == animName) {
$root.addClass(reactiveClass).click(outAnim);
$(this).unbind(animationEndEvent, animListener);
}
}
kickoffBlankslateIcons.addClass(visibleClass);
styleBrand();
icons.each(createParticles);
kickoffBlankslateIcons.bind(animationEndEvent, animListener);
},
outAnim = function(){
var animName = "outKickoffBlankslateIcons",
animDuration = 1200,
squares = kickoffBlankslateIcons.find(".square"),
delays = [];
insertCSSAnimation(animName, {
0 : {},
100 : prefix({
"opacity":"0",
"transform":"translateX(-"
+ windowWidth
+ "px) scale(.1) rotate(-300deg)"
})
});
function hideParticles() {
var $this = $(this),
delay = Math.random();
delays.push(delay);
$this
.css(prefix({
"animation-name":animName,
"animation-duration":animDuration + "ms",
"animation-timing-function":"cubic-bezier(.7,0,.6,.2)",
"animation-delay":delay
}))
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == animName)
$this.addClass(hiddenClass);
});
}
squares.each(hideParticles);
$root.removeClass(reactiveClass).unbind("click", outAnim);
setTimeout(function(){
kickoffBlankslateIcons.removeClass(visibleClass);
kickoffTodos();
}, animDuration + (delays.sort().pop() * 1000));
};
inAnim();
}
function kickoffTodos(){
var kickoffTodos = $works.eq(5),
screenshot = kickoffTodos.children("img"),
inAnim = function() {
var bg = kickoffTodos.children(".bg"),
starsBack = kickoffTodos.children(".starsBack"),
starsMiddle = kickoffTodos.children(".starsMiddle"),
starsFront = kickoffTodos.children(".starsFront"),
blur = kickoffTodos.children(".blur"),
stars = [starsBack,starsMiddle,starsFront],
starsLength = stars.length,
auroraAnimName = "inAuroraFadesIn",
starsAnimName = "inMoveStars",
screenshotAnimName = "inKickoffTodosWindow",
inBlurAnimName = "inKickoffTodosBlurWindow",
outBlurAnimName = "outKickoffTodosBlurWindow";
logo.css({
"color":"#fff",
"text-shadow":"0 1px 0 #000"
});
baseline.css({
"color":"#666E8A",
"text-shadow":"0 1px 0 #000"
});
kickoffTodos.addClass(visibleClass);
insertCSSAnimation(auroraAnimName, {
0 : prefix({
"opacity":"0",
"transform":"scale(1.1) translateX(10px)"
}),
100 : {}
});
insertCSSAnimation(starsAnimName, {
0 : {"opacity":"0"},
2 : prefix({
"opacity":"1",
"transform":"translateX(-160px)"
}),
4 : prefix({
"opacity":".2",
"transform":"translateX(-320px)"
}),
5 : prefix({
"opacity":"1",
"transform":"translateX(-400px)"
}),
99: prefix({"transform":"translateX(-8000px)"}),
100 : prefix({
"opacity":"0",
"transform":"translateX(-8000px)"
})
});
insertCSSAnimation(screenshotAnimName, {
0 : {"opacity":"0"},
100 : {}
});
insertCSSAnimation(inBlurAnimName, {
0 : prefix({
"opacity":"0",
"transform":"scale(.96)"
}),
100 : {"opacity":".7"}
});
insertCSSAnimation(outBlurAnimName, {
0 : {"opacity":".7"},
100 : {"opacity":"0"}
});
bg
.css(prefix("animation"), auroraAnimName + " 1.5s ease-out")
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == auroraAnimName)
$root.css("background","#03092B");
});
for (var i=0; i < starsLength; i++)
stars[i].css(prefix({
"animation-name":starsAnimName,
"animation-timing-function":"linear",
"animation-iteration-count":"infinite"
}));
starsFront.css(prefix("animation-duration"), "420s");
starsMiddle.css(prefix("animation-duration"),"660s");
starsBack.css(prefix("animation-duration"), "840s");
screenshot.addClass(hiddenClass);
blur
.css(prefix({
"opacity":"0",
"animation":inBlurAnimName + " .4s ease-out 1.2s"
}))
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == inBlurAnimName) {
blur
.css(prefix("animation"), outBlurAnimName + " 1s linear")
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == outBlurAnimName) {
blur.addClass(hiddenClass);
$root.addClass(reactiveClass).click(outAnim);
}
});
screenshot
.css(prefix("animation"), screenshotAnimName + " .5s linear")
.removeClass(hiddenClass);
}
});
},
outAnim = function() {
var outGlobalAnimName = "outKickoffTodosGlobal",
outScreenshotAnimName = "outKickoffTodosScreenshot";
insertCSSAnimation(outGlobalAnimName, {
0 : {},
100 : {"opacity":"0"}
});
insertCSSAnimation(outScreenshotAnimName, {
0 : {},
100 : {"opacity":"0"}
});
kickoffTodos
.css(
prefix("animation"),
outGlobalAnimName + " 2.5s ease-out"
)
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == outGlobalAnimName) {
kickoffTodos.removeClass(visibleClass);
thanks();
}
});
screenshot
.css(
prefix("animation"),
outScreenshotAnimName + " 2s cubic-bezier(.2,.5,.3,1)"
)
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == outScreenshotAnimName)
screenshot.addClass(hiddenClass);
});
$root.css("background","#000").removeClass(reactiveClass);
};
inAnim();
$window.resize(function(){
resizeScreenshot(screenshot);
});
}
function thanks(){
var thanks = $works.eq(6),
inAnim = function(){
var gradient = $("<span/>", {"class":"gradient"}),
gradientAnimName = "inThanksGradient",
infoAnimName = "inThanksInfo",
copyright = thanks.children("p").eq(1),
lis = thanks.find("li"),
mail = lis.eq(0),
twitter = lis.eq(1),
info = [copyright,mail,twitter],
infoLength = info.length,
styleBrand = function() {
$root.css("background","#000");
logo.css({
"color":"#fff",
"text-shadow":"0 1px 0 #000"
});
baseline.css({
"color":"#777",
"text-shadow":"0 1px 0 #000"
});
},
showInfo = function() {
for (var j=0; j < infoLength; j++) {
info[j]
.css(
prefix("animation"),
infoAnimName + " 1.2s cubic-bezier(.2,.5,.3,1)"
)
.bind(animationEndEvent, function(e){
if(e.originalEvent.animationName == infoAnimName)
$(this).css("opacity",1);
});
};
mail.css(prefix("animation-delay"),".4s");
twitter.css(prefix("animation-delay"),".6s");
};
insertCSSAnimation(gradientAnimName, {
0 : prefix({
"opacity":"0",
"transform":"scale(1.5)"
}),
100 : {"opacity":"1"}
});
insertCSSAnimation(infoAnimName, {
0 : prefix({
"opacity":"0",
"transform":"translateY(15px)"
}),
100 : {"opacity":"1"}
});
gradient.css(
prefix("animation"),
gradientAnimName + " 2s cubic-bezier(.2,.5,.3,1)"
);
for (var i=0; i < infoLength; i++) {
info[i].css("opacity",0);
};
var animImages = thanks.children("p").eq(0).children("img"),
i = 0,
animImagesLength = animImages.length - 1,
thanksAnim = setInterval(function(){
animImages.eq(i).remove();
i++;
if(i == animImagesLength) {
clearInterval(thanksAnim);
showInfo();
}
}, 30);
thanks.prepend(gradient).addClass(visibleClass);
styleBrand();
};
inAnim();
}
function removeLoader(){
var $loader = $("#loader"),
animName = "removeLoader";
insertCSSAnimation(animName, {
0 : {},
10 : prefix({"transform":"scale(1.2)"}),
15 : prefix({"transform":"scale(1.2)"}),
100 : prefix({
"transform":"scale(.1)",
"opacity":"0"
})
});
$loader
.css(prefix("animation"), animName + " 1.5s cubic-bezier(.2,.6,.3,1)")
.bind(animationEndEvent, function(){
$loader.remove();
});
};
// Let the show begin
removeLoader();
personal32pxSet();
});
