Skip to content

Instantly share code, notes, and snippets.

@tvon

tvon/safari.css

Created February 24, 2009 21:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tvon/69810 to your computer and use it in GitHub Desktop.
Save tvon/69810 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
safari.css
body { margin: 0; color: #fff; background: #000; overflow: hidden; }
audio { visibility: hidden; }
#header h1, #apple div.icon { color: transparent; }
#apple, #header, #safari { position: absolute; top: 40%; left: 50%; }
#apple { width: 600px; height: 538px; margin: -290px 0 0 -290px; overflow: hidden; }
#apple div { position: absolute; width: 600px; height: 538px; opacity: 0; }
#apple div.icon { z-index: 3; background: url(http://images.apple.com/safari/welcome/images/apple_icon.png) no-repeat 233px 184px; }
#apple div.spots { z-index: 4; background: url(http://images.apple.com/safari/welcome/images/apple_spots.png) no-repeat 195px 133px; }
#apple div.flare { z-index: 1; background: url(http://images.apple.com/safari/welcome/images/apple_flare.jpg) no-repeat 0 0; }
#apple div.flareicon { z-index: 5; background: url(http://images.apple.com/safari/welcome/images/apple_flare_icon.png) no-repeat 233px 184px; }
#header { width: 600px; height: 60px; margin: -43px 0 0 -300px; opacity: 0; }
#header h1 { width: 100%; height: 100%; margin: 0; background: url(http://images.apple.com/safari/welcome/images/header.jpg) no-repeat 0 0;
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(255, 255, 255, 0.4)));
}
#safari div { width: 256px; height: 256px; margin: -158px 0 0 -128px;
-webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(rgba(255, 255, 255, 0.4)));
}
#safari video,
#safari img { width: 256px; height: 256px; opacity: 0; }
/*------------------------
animations
------------------------*/
/* apple keyframes */
@-webkit-keyframes apple-icon {
from {
opacity: 0;
-webkit-transform: scale(3);
-webkit-animation-timing-function: ease-out;
}
22% {
opacity: 1;
-webkit-transform: scale(1.1);
-webkit-animation-timing-function: linear;
}
30% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: linear;
}
82% {
opacity: 1;
-webkit-transform: scale(0.92);
-webkit-animation-timing-function: ease-out;
}
to {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-in;
}
}
@-webkit-keyframes apple-spots {
from {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-out;
}
22% {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: ease-in;
}
82% {
opacity: 1;
-webkit-transform: scale(0.92) rotate(10deg);
-webkit-animation-timing-function: ease-out;
}
to {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-in;
}
}
@-webkit-keyframes apple-flare {
from {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-out;
}
22% {
opacity: 0;
-webkit-transform: scale(0.2) translateX(-20px) translateY(-100px);
-webkit-animation-timing-function: ease-out;
}
30% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: linear;
}
82% {
opacity: 1;
-webkit-transform: scale(0.92);
-webkit-animation-timing-function: ease-out;
}
to {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-in;
}
}
@-webkit-keyframes apple-flareicon {
from {
opacity: 0;
-webkit-transform: scale(3);
-webkit-animation-timing-function: ease-out;
}
22% {
opacity: 0;
-webkit-transform: scale(1.1);
-webkit-animation-timing-function: linear;
}
30% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: linear;
}
82% {
opacity: 1;
-webkit-transform: scale(0.92);
-webkit-animation-timing-function: ease-out;
}
to {
opacity: 0;
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: ease-in;
}
}
/* text keyframes */
@-webkit-keyframes header {
from {
opacity: 0;
-webkit-transform: scale(2.6);
-webkit-animation-timing-function: linear;
}
20% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: linear;
}
77% {
opacity: 1;
-webkit-transform: scale(0.9);
-webkit-animation-timing-function: linear;
}
to {
opacity: 0;
-webkit-transform: scale(0.1);
-webkit-animation-timing-function: linear;
}
}
/* safari keyframes */
@-webkit-keyframes safari {
from {
-webkit-transform: scale(1.2);
-webkit-animation-timing-function: linear;
}
20% {
-webkit-transform: scale(0.8);
-webkit-animation-timing-function: linear;
}
84% {
-webkit-transform: scale(0.6);
-webkit-animation-timing-function: linear;
}
to {
-webkit-transform: scale(0.2);
-webkit-animation-timing-function: linear;
}
}
@-webkit-keyframes safari-video {
from {
opacity: 0;
}
20% {
opacity: 1;
}
84% {
opacity: 1;
}
to {
opacity: 0;
}
}
/* apple timing */
body.go #apple div {
-webkit-animation-delay: 0.5s;
-webkit-animation-duration: 1.7s;
}
body.go #apple div.icon {
-webkit-animation-name: apple-icon;
}
body.go #apple div.spots {
-webkit-animation-name: apple-spots;
}
body.go #apple div.flare {
-webkit-animation-name: apple-flare;
}
body.go #apple div.flareicon {
-webkit-animation-name: apple-flareicon;
}
/* text timing */
body.go #header {
-webkit-animation-delay: 2.2s;
-webkit-animation-duration: 1.5s;
-webkit-animation-name: header;
}
/* safari timing */
body.go #safari div,
body.go #safari video,
body.go #safari img {
-webkit-animation-delay: 3.7s;
-webkit-animation-duration: 1.9s;
}
body.go #safari div {
-webkit-animation-name: safari;
}
body.go #safari video,
body.go #safari img {
-webkit-animation-name: safari-video;
}
Raw
safari.js
var WelcomScreen = {
initialize: function() {
this.music = document.getElementById('music');
this.video = document.getElementById('compass');
var self = this;
function animationStart(event) {
if (event.animationName === 'safari-video')
self.video.play();
}
function animationEnded(event) {
if (event.animationName === 'safari-video')
self.redirect();
}
function musicEnded(event) {
self.redirect();
}
if ("play" in this.music)
this.music.addEventListener('ended', musicEnded, false);
else
window.addEventListener('webkitAnimationEnd', animationEnded, false);
window.addEventListener('webkitAnimationStart', animationStart, false);
this.preloadMedia();
},
preloadMedia: function() {
var mediaFound = 0;
var mediaLoaded = 0;
var self = this;
function mediaDidLoad() {
++mediaLoaded;
if (mediaLoaded >= mediaFound)
self.start();
}
var audioElements = document.getElementsByTagName('audio');
for (var i = 0; i < audioElements.length; ++i) {
var audio = audioElements[i];
if (!("load" in audio) || !audio.src)
continue;
++mediaFound;
audio.addEventListener('load', mediaDidLoad, false);
audio.load();
}
var videoElements = document.getElementsByTagName('video');
for (var i = 0; i < videoElements.length; ++i) {
var video = videoElements[i];
if (!("load" in video) || !video.src)
continue;
++mediaFound;
video.addEventListener('load', mediaDidLoad, false);
video.load();
}
var rules = document.styleSheets[0].rules;
for (var i = 0; i < rules.length; ++i) {
var rule = rules[i];
var urls = rule.cssText.match(/url\([^\)]*\)/g);
if (!urls)
continue;
mediaFound += urls.length;
for (var j = 0; j < urls.length; ++j) {
var url = urls[j].substring(4, (urls[j].length - 1)); // Remove the "url(" prefix and ")" suffix.
var image = new Image();
image.addEventListener('load', mediaDidLoad, false);
image.src = url;
}
}
},
start: function() {
if ("play" in this.music)
this.music.play();
document.body.className = 'go';
},
redirect: function() {
document.location = 'topsites://';
}
};
window.addEventListener('load', function() {
WelcomScreen.initialize();
}, false);
window.addEventListener('unload', function() {
document.body.className = '';
}, false);
Raw
safari4-welcome.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>Welcome to Safari 4 - Apple Inc.</title>
<meta name="omni_page" content="Safari - Welcome Screen" />
<meta name="Category" content="" />
<meta name="Description" content="" />
<meta name="Author" content="Apple Inc." />
<script type="text/javascript" src="http://images.apple.com/safari/welcome/scripts/safari.js" charset="utf-8"></script>
<link rel="stylesheet" href="http://images.apple.com/safari/welcome/styles/safari.css" type="text/css" />
<noscript>
<meta http-equiv="refresh" content="0;url=topsites://" />
</noscript>
</head>
<body>
<audio id="music" src="http://images.apple.com/safari/welcome/media/audio.mp4"></audio>
<div id="header">
<h1>Welcome to Safari 4</h1>
</div>
<div id="apple">
<div class="icon"></div>
<div class="spots"></div>
<div class="flare"></div>
<div class="flareicon"></div>
</div>
<div id="safari">
<div>
<video id="compass" src="http://images.apple.com/safari/welcome/media/compass.mov" width="256" height="256">
<img src="http://images.apple.com/safari/welcome/images/safari.jpg" width="200" height="200" alt="Safari 4" />
</video>
</div>
</div>
<img src="http://metrics.apple.com/b/ss/appleglobal,appleusappwelcome/1/H.17/0?pageName=safari%20-%20welcome%20screen%20%28us%29&amp;channel=www.us.welcomescreen&amp;c1=www.us.safari.welcomescreen" />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment