Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>StarWars Crawl in Webkit Animation</title>
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=no" />
<link href="http://fonts.googleapis.com/css?family=Orbitron:900" rel="stylesheet" type="text/css" />
<link href="http://meyerweb.com/eric/tools/css/reset/reset.css" rel='stylesheet' type="text/css" />
<style>
body {
  margin:0;
  padding:0;
  font-family:'Helvetica',sans-serif;
}
​
#starwars {
  position:absolute;
  background-color:#000;
  background-image:url('http://t0.gstatic.com/images?q=tbn:ANd9GcQSaw_xTT7Fr7o0IYuArAVQ2S8ZmcVZpvlhrm9Y22tgSMmiu0_V');
  background-repeat:repeat;
  left:1em;
  top:1em;
  right:1em;
  bottom:1em;
  overflow:hidden;
}
​
#starwars > div {
  position:relative;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
​
#galaxy {
  display:block;
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  height:3em;
  color:#06f;
  font-size:1.5em;
  margin-top:-0.1em;
  text-align:center;;
  vertical-align:middle;
  opacity:0;
  -webkit-animation-name:starwars_galaxy;
  -webkit-animation-duration:3s;
  -webkit-animation-timing-function:linear;
}
​
@-webkit-keyframes starwars_galaxy {
  from {
    opacity:1;
  }
  50% {
    opacity:1;
  }
  to {
    opacity:0;
  }
}
​
#title {
  position:absolute;
  display:block;
  left:-400%;
  top:30%;
  width:900%;
  height:100%;
  color:transparent;
  font-size:10em;
  -webkit-text-stroke-width:0.05em;
  -webkit-text-stroke-color:#ff3;/*XXX: this will not animated! :'( */
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  opacity:0;
  -webkit-animation-name:starwars_title;
  -webkit-animation-duration:7s;
  -webkit-animation-timing-function:ease-in-out;
  -webkit-animation-delay:3s;
}
​
@-webkit-keyframes starwars_title {
  from {
    font-size:1000em;
    opacity:1;
  }
  90% {
    font-size:0;
    opacity:1;
  }
  to {
    font-size:0;
    opacity:0;
  }
}
​
#title > p {
  font-family:'Orbitron',sans-serif;
  font-weight:900;
}
​
#crawl {
  position:absolute;
  left:20%;
  top:40%;
  width:60%;
  height:60%;
  white-space:pre;
  -webkit-perspective:5em;
  -webkit-perspective-origin:50% 0%;
}
​
#crawl > div {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
  -webkit-transform:rotateX(45deg);
}
​
#crawl > div > div {
  position:absolute;
  top:0;
  width:100%;
  margin:0;
  padding:0;
  color:#fc0;
  font-size:1.2em;
  font-style:italic;
  text-align:center;/*XXX: text-align:justify;text-justify:inter-word;*/
  letter-spacing:0.2em;
  opacity:0;
  -webkit-animation-name:starwars_crawl;
  -webkit-animation-duration:40s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-delay:10s;
}
​
@-webkit-keyframes starwars_crawl {
  from {
    top:50%;
    opacity:1;
  }
  to {
    opacity:1;
    top:-100%;
  }
}
</style>
</head>
<body>
​
<div id="starwars">
  <audio src="http://www.moviewavs.com/0094473955/WAVS/Movies/Star_Wars/starwars.wav" autoplay="autoplay">
    <video src="http://www.moviewavs.com/0094473955/WAVS/Movies/Star_Wars/starwars.wav" autoplay="autoplay">
  </audio>
  <div>
    <div id="galaxy">
      <p>A long time ago, in a galaxy far,<br />far away...</p>
    </div>
    <div id="title">
      <p>STAR<br />WARS</p>
    </div>
    <div id="crawl">
      <div>
        <div>
          <p>Episode IV</p>
          <p>A NEW HOPE</p>
<p>It is a period of civil war. Rebel
spaceships, striking from a hidden 
base, have won their first victory 
against the evil Galactic Empire.</p>
<p>During the battle, Rebel spies managed 
to steal secret plans to the Empire's 
ultimate weapon, the Death Star, an 
armored space station with enough 
power to destroy an entire planet.</p>
<p>Pursued by the Empire's sinister agents, 
Princess Leia races home aboard her 
starship, custodian of the stolen plans 
that can save her people and restore 
freedom to the galaxy....</p>
        </div>
      </div>
    </div>
  </div>
</div>
​
</body>
</html>
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers