soy Kseso y esto EsCSS

Intro Star Wars IV en puro Css: texto 3D con autoscroll

Intro Star Wars IV en puro Css: texto 3D con autoscroll

·Por Kseso ✎ 7

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.

texto con scroll 3D con Css

Ver demo

¿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.

avatar del Editor del blog

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 Don Kseso Kseso