Scrolling text like in Star Wars
By Marcin Olejarz
This keyframes presents text scrolling like in Star Wars. In proposal it can be used for presenting authors of application.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8">
<style>
body {
background-color:black;
}
#titles
{
background-color:black;
color:yellow;
border:1px solid black;
position: absolute;
width: 300px;
height: 25em;
bottom: 0;
margin-left:0;
font-size: 200%;
font-weight: bold;
text-align: center;
overflow: hidden;
-webkit-transform-origin: 50% 100%;
-webkit-transform: perspective(300px) rotateX(25deg);
}
#titlecontent
{
position: absolute;
top: 90%;
-webkit-animation: scroll-text 20s infinite;
}
@-webkit-keyframes scroll-text {
0% { top: 90%; }
100% { top: -65%; }
}
</style>
</head>
<body>
<div id="titles"><div id="titlecontent">
<h1>Authors:</h1>
<p>Guliano: map provider</p>
<p>Anonimo: main programist</p>
<p>Bernardo: project manager</p>
<p>Armando: PR</p>
</div></div>
</body>
</html>