|
/* |
|
** ALL CREDIT GOES TO |
|
** Craig Buckler |
|
** http://www.sitepoint.com/css3-starwars-scrolling-text/ |
|
** |
|
** Blame me for the music via embedded video bit |
|
*/ |
|
|
|
@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700); |
|
|
|
* { padding: 0; margin: 0; } |
|
|
|
body, html |
|
{ |
|
width: 100%; |
|
height: 100%; |
|
font-family: "Droid Sans", arial, verdana, sans-serif; |
|
font-weight: 700; |
|
color: #ff6; |
|
background-color: #000; |
|
overflow: hidden; |
|
} |
|
|
|
p#start |
|
{ |
|
position: relative; |
|
width: 16em; |
|
font-size: 200%; |
|
font-weight: 400; |
|
margin: 20% auto; |
|
color: #4ee; |
|
opacity: 0; |
|
z-index: 1; |
|
-webkit-animation: intro 2s ease-out; |
|
-moz-animation: intro 2s ease-out; |
|
-ms-animation: intro 2s ease-out; |
|
-o-animation: intro 2s ease-out; |
|
animation: intro 2s ease-out; |
|
} |
|
|
|
@-webkit-keyframes intro { |
|
0% { opacity: 1; } |
|
90% { opacity: 1; } |
|
100% { opacity: 0; } |
|
} |
|
|
|
@-moz-keyframes intro { |
|
0% { opacity: 1; } |
|
90% { opacity: 1; } |
|
100% { opacity: 0; } |
|
} |
|
|
|
@-ms-keyframes intro { |
|
0% { opacity: 1; } |
|
90% { opacity: 1; } |
|
100% { opacity: 0; } |
|
} |
|
|
|
@-o-keyframes intro { |
|
0% { opacity: 1; } |
|
90% { opacity: 1; } |
|
100% { opacity: 0; } |
|
} |
|
|
|
@keyframes intro { |
|
0% { opacity: 1; } |
|
90% { opacity: 1; } |
|
100% { opacity: 0; } |
|
} |
|
|
|
h1 |
|
{ |
|
position: absolute; |
|
width: 2.6em; |
|
left: 50%; |
|
top: 25%; |
|
font-size: 10em; |
|
text-align: center; |
|
margin-left: -1.3em; |
|
line-height: 0.8em; |
|
letter-spacing: -0.05em; |
|
color: #000; |
|
text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6; |
|
opacity: 0; |
|
z-index: 1; |
|
-webkit-animation: logo 5s ease-out 2.5s; |
|
-moz-animation: logo 5s ease-out 2.5s; |
|
-ms-animation: logo 5s ease-out 2.5s; |
|
-o-animation: logo 5s ease-out 2.5s; |
|
animation: logo 5s ease-out 2.5s; |
|
} |
|
|
|
h1 sub |
|
{ |
|
display: block; |
|
font-size: 0.3em; |
|
letter-spacing: 0; |
|
line-height: 0.8em; |
|
} |
|
|
|
@-webkit-keyframes logo { |
|
0% { -webkit-transform: scale(1); opacity: 1; } |
|
50% { opacity: 1; } |
|
100% { -webkit-transform: scale(0.1); opacity: 0; } |
|
} |
|
|
|
@-moz-keyframes logo { |
|
0% { -moz-transform: scale(1); opacity: 1; } |
|
50% { opacity: 1; } |
|
100% { -moz-transform: scale(0.1); opacity: 0; } |
|
} |
|
|
|
@-ms-keyframes logo { |
|
0% { -ms-transform: scale(1); opacity: 1; } |
|
50% { opacity: 1; } |
|
100% { -ms-transform: scale(0.1); opacity: 0; } |
|
} |
|
|
|
@-o-keyframes logo { |
|
0% { -o-transform: scale(1); opacity: 1; } |
|
50% { opacity: 1; } |
|
100% { -o-transform: scale(0.1); opacity: 0; } |
|
} |
|
|
|
@keyframes logo { |
|
0% { transform: scale(1); opacity: 1; } |
|
50% { opacity: 1; } |
|
100% { transform: scale(0.1); opacity: 0; } |
|
} |
|
|
|
/* the interesting 3D scrolling stuff */ |
|
#titles |
|
{ |
|
position: absolute; |
|
width: 18em; |
|
height: 50em; |
|
bottom: 0; |
|
left: 50%; |
|
margin-left: -9em; |
|
font-size: 350%; |
|
text-align: justify; |
|
overflow: hidden; |
|
-webkit-transform-origin: 50% 100%; |
|
-moz-transform-origin: 50% 100%; |
|
-ms-transform-origin: 50% 100%; |
|
-o-transform-origin: 50% 100%; |
|
transform-origin: 50% 100%; |
|
-webkit-transform: perspective(300px) rotateX(25deg); |
|
-moz-transform: perspective(300px) rotateX(25deg); |
|
-ms-transform: perspective(300px) rotateX(25deg); |
|
-o-transform: perspective(300px) rotateX(25deg); |
|
transform: perspective(300px) rotateX(25deg); |
|
} |
|
|
|
#titles:after |
|
{ |
|
position: absolute; |
|
content: ' '; |
|
left: 0; |
|
right: 0; |
|
top: 0; |
|
bottom: 60%; |
|
background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); |
|
background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); |
|
background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); |
|
background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); |
|
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%); |
|
pointer-events: none; |
|
} |
|
|
|
#titles p |
|
{ |
|
text-align: justify; |
|
margin: 0.8em 0; |
|
} |
|
|
|
#titles p.center |
|
{ |
|
text-align: center; |
|
} |
|
|
|
#titles a |
|
{ |
|
color: #ff6; |
|
text-decoration: underline; |
|
} |
|
|
|
#titlecontent |
|
{ |
|
position: absolute; |
|
top: 100%; |
|
-webkit-animation: scroll 100s linear 4s infinite; |
|
-moz-animation: scroll 100s linear 4s infinite; |
|
-ms-animation: scroll 100s linear 4s infinite; |
|
-o-animation: scroll 100s linear 4s infinite; |
|
animation: scroll 100s linear 4s infinite; |
|
} |
|
|
|
/* animation */ |
|
@-webkit-keyframes scroll { |
|
0% { top: 100%; } |
|
100% { top: -170%; } |
|
} |
|
|
|
@-moz-keyframes scroll { |
|
0% { top: 100%; } |
|
100% { top: -170%; } |
|
} |
|
|
|
@-ms-keyframes scroll { |
|
0% { top: 100%; } |
|
100% { top: -170%; } |
|
} |
|
|
|
@-o-keyframes scroll { |
|
0% { top: 100%; } |
|
100% { top: -170%; } |
|
} |
|
|
|
@keyframes scroll { |
|
0% { top: 100%; } |
|
100% { top: -170%; } |
|
} |