Intro Star Wars IV en puro Css: texto 3D con autoscroll 17.11.12
Explicación a cómo hacer en puro CSS la intro de Star Wars IV (texto 3D desplazándose por el espacio y desapareciendo).
Intro Star Wars IV en puro Css: texto 3D con autoscroll
Hace unas fechas, fue muy mentada la recreación en puro Css de la intro de Star Wars realizada por Craig Buckler. Sí, esa de las letras amarillas sobre fondo negro que se desplaza en 3D y desaparece en el fondo del espacio profundo.
¿Echamos un vistazo a sus códigos? Vamos, pues. Ya te adelanto que su Css es mucho más sencillo y limpio de lo que quizás imaginas.
Marcado Html
Puro texto. No encontrarás ni js, ni imágenes ni ningún recurso que no sea puro texto.
<h1>STAR WARS<sub>titles in CSS3</sub></h1>
<div id="titles">
<div id="titlecontent">
<p class="center">EPISODE IV<br />
A NEW HOPE FOR CSS3</p>
<p>... resto del texto...</p>
</div>
</div>
Los estilos
La caja general (#titles) se posiciona abajo y al centro (position: absolute; bottom:0; left: 50%). Para el efecto 3D con la propiedad transform: un pequeño giro de 25 grados y se ajusta la perspectiva.
El div donde se alojan directamente los párrafos (#titlecontent) está posicionado en la parte superior de su padre (#titles).
Nota que me ahorro los prefijos privativos, pero estar, están y son necesarios.
#titles {
position: absolute;
width: 18em;
height: 50em;
bottom: 0;
left: 50%;
margin-left: -9em;
font-size: 350%;
font-weight: bold;
text-align: justify;
overflow: hidden;
transform-origin: 50% 100%;
transform: perspective(300px) rotateX(25deg);
}
#titlecontent {
position: absolute;
top: 100%;
}
Con estos estilos, el texto queda fuera de la vista e inaccesible. Es el momento de hacerlos aparecer e ir desplazándose hacia el espacio profundo.
Aquí entran en juego las propiedades del grupo animation y para que no necesite intervención del usuario las @keyframes. Así que aquí están:
#titlecontent {
animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
0% { top: 100%; }
100% { top: -170%; }
}
Y con esto, prácticamente está. Sólo queda un pequeño detalle:
Hacer que el texto se "funda" con el fondo. Que desaparezca suavemente (fade) en un punto dado de la ventana.
Para ello recurrimos al pseudoelemento :after posicionado en el punto que deseamos y con un gradiente lineal (de transparente a negro 100%) y lo deshabilitamos por completo con pointer-events:
#titles:after {
position: absolute;
content: ' ';
left: 0;
right: 0;
top: 0;
bottom: 60%;
background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
pointer-events: none;
}
Que la fuerza CSS3 te acompañe, pequeño Padawan
Si añadir, pequeño Padawan, algo quieres o cometidos errores reparar deseas, de los comentarios su uso hacer podrías.
.){kind=link}
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Qué genial que está!!!! una sola preguntita, esto puede usarse en una sola entrada? se me ocurría por ejemplo agregarlo a la sección de "quienes somos" de mi blog de cine justamente! Pregunto porque me preocupa que en el demo veo que se despliega en toda la pantalla.
ResponderEliminarHola Pola
ResponderEliminarClaro que podrías. A simple vista sería necesario ajustar el tamaño de #titles y afinar un poco el resto de propiedades a vuestro caso en particular.
Lo que si te sugiero es que verifiques qué navegador/versión usan tus visitas.
Un saludo
Me he quedado flipado, me encanta. Pero no funciona en Chrome :(
ResponderEliminarMe indica un compañero que sí que lo ve en Chrome, el caso es que a mí se me queda en negro tras salir lo de "Star Wars. Titles in CSS" en Chrome (actualizado a última versión: 23.0.1271.64 m). En firefox sin problemas.
ResponderEliminarPero otros dos amigos les pasa lo mismo que a mí, en chrome nanay.
Hola Quatermain
ResponderEliminarTienes razón.
En Chrome el texto ya no se ve. Tengo la misma versión que tú.
En un vistazo rápido parece que el problema está en la declaración:
-webkit-transform: perspective(300px) rotateX(25deg);
Conocía el bug con -webkit-transform-style:preserve-3d;
No se si estará relacionado. Pero lamentablemente en unos días no podré dedicarle tiempo.
Si se anula la perspectiva el texto se muestra, claro que sin ese efecto.
Un saludo y gracias por el apunte.
Yo tengo Chrome, la misma versión que el Quater, y lo veo perfectamente.
ResponderEliminar