Skip to content

Instantly share code, notes, and snippets.

@meleyal
Created March 26, 2011 09:10
Show Gist options
  • Save meleyal/888152 to your computer and use it in GitHub Desktop.
Save meleyal/888152 to your computer and use it in GitHub Desktop.
Apple.com reveal fx
body { background:url(http://images.apple.com/global/elements/quicktime/loading.gif) no-repeat 50% 150px; }
body.loaded { background:transparent; }
#showcase .content,
#promobar,
#itunes,
#globalfooter { opacity:0; -webkit-transition:opacity .5s; -moz-transition:opacity .5s; }
.loaded #showcase .content,
.loaded #promobar,
.loaded #itunes,
.loaded #globalfooter { opacity:1; }
.revealed #showcase .content { position:static; }
#showcase .content { -webkit-transition-delay: .8s; -moz-transition-delay: .8s; }
#showcase .content.first { -webkit-transition-delay: .9s; -moz-transition-delay: .9s; }
#showcase .content.second { -webkit-transition-delay:1s ; -moz-transition-delay:1s ; }
#showcase .content.third { -webkit-transition-delay:1.1s; -moz-transition-delay:1.1s; }
#promobar { -webkit-transition-delay:1.6s; -moz-transition-delay:1.6s; }
#itunes { -webkit-transition-delay:1.7s; -moz-transition-delay:1.7s; }
#globalfooter { -webkit-transition-delay:1.8s; -moz-transition-delay:1.7s; }
.canceled #showcase .content,
.canceled #promobar,
.canceled #itunes,
.canceled #globalfooter { -webkit-transition:none; -moz-transition:none; }
if (typeof(AC) == "undefined") {
AC = {}
}
AC.Reveal = {
loaded: function (a) {
window.setTimeout(function () {
document.body.addClassName("loaded")
}, 10)
},
revealed: function (a) {
if (a.target.id == "globalfooter") {
document.body.addClassName("revealed");
window.removeVendorEventListener("transitionEnd", AC.Reveal.revealed, false)
}
},
cancel: function (a) {
if (typeof window.addEventListener == "function") {
window.removeEventListener("load", AC.Reveal.loaded, false)
}
window.removeVendorEventListener("transitionEnd", AC.Reveal.revealed, false);
document.body.addClassName("loaded");
document.body.addClassName("revealed");
document.body.addClassName("canceled")
}
};
if (typeof window.addEventListener == "function") {
window.addEventListener("load", AC.Reveal.loaded, false)
}
window.addVendorEventListener("transitionEnd", AC.Reveal.revealed, false);
window.setTimeout(AC.Reveal.cancel, 3000);
document.fire("ac:reveal:load");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment