En la oscuridad del cielo recreado en la cabecera animada de Tesla Technologies podemos observar que aparecen unas estrellas fugaces, de vez en cuando.
Para la realización de las mismas utilizamos únicamente elementos html estándar, dos <div> anidados para cada estrella, combinados con css3, para hacer el destello y el movimiento de la misma, y javascript para hacer que la aparición en el firmamento sea más o menos aleatoria.
Empecemos por el HTML
Como ya hemos comentado, para la representación de una estrella fugaz se emplean dos elementos div anidados del siguiente modo.
<div id="espacio1" class="espacio f1">
<div class="estrella"></div>
</div>
La capa interna con la clase estrella será el haz de luz que veremos aparecer, mientras que la capa contenedora sera la limitación del área donde será visible la animación.
Ahora vamos a por el CSS
Para que esto sea posible a dichas clases le asociamos el siguiente estilo.
div.espacio { position:absolute; overflow:hidden; width:150px; height:25px; }
div.estrella { position:relative; width:150; top:5px; left:150px; height:1px; background-color:#ff0; opacity:0.2; -moz-box-shadow: 1px 1px 2px #ff0, 1px -1px 2px #ff0; -webkit-box-shadow: 1px 1px 2px #ff0, 1px -1px 2px #ff0; box-shadow: 1px 1px 2px #ff0, 1px -1px 2px #ff0; z-index:5;}
Prestando especial atención al detalle de que el área visible es de 150×25 px y la estrella tiene 1px de alto y utilizamos la propiedad box-shadow, con sus variantes para los diferentes navegadores, para darle el difuminado. Y además, esta situada a la derecha del área visible, desplazándola 150px desde el lateral izquierdo.
Añadimos la animación con CSS3
Una vez tenemos la parte estática es momento de empezar con el movimiento. Para lo cual creamos la animación estrellasFugaces_1.
@keyframes estrellasFugaces_1 {
0%,3% { opacity:0.2; width:0; transform:rotate(-5deg) translate(0, 0); }
8% { opacity:0.7; width:75px; }
12% { opacity:0.3; }
15%,100% { opacity:0; width:0; }
20% { transform:rotate(-5deg) translate(-150px, 0); }
}
@-moz-keyframes estrellasFugaces_1 {
0%,3% { opacity:0.2; width:0; -moz-transform:rotate(-5deg) translate(0, 0); }
8% { opacity:0.7; width:75px; }
12% { opacity:0.3; }
15%,100% { opacity:0; width:0; }
20% { -moz-transform:rotate(-5deg) translate(-150px, 0); }
}
@-webkit-keyframes estrellasFugaces_1 {
0%,3% { opacity:0.2; width:0; -webkit-transform:rotate(-5deg) translate(0, 0); }
8% { opacity:0.7; width:75px; }
12% { opacity:0.3; }
15%,100% { opacity:0; width:0; }
20% { -webkit-transform:rotate(-5deg) translate(-150px, 0); }
}
En el inicio de la animación hacemos casi transparente la capa de la estrella, le damos tamaño 0px y la inclinamos con la propiedad rotate de transform. A continuación reducimos la transparencia y aumentamos el tamaño de capa (en el 8%), en el 12% volvemos a aumentar la transparencia, haciéndola invisible en el 15%. Mientras que, desde el 3% al 20% le aplicamos un desplazamiento a la capa de -150px en el eje horizontal con la propiedad translate. O lo que es lo mismo hacemos que la capa aparezca y se atenué mientras expandimos y contraemos su tamaño unido a un desplazamiento de derecha a izquierda.
Para acabar con el CSS asociamos la animación que acabamos de definir a la capa de la estrella, nosotros definimos el intervalo en 7s, teniendo en cuenta que la estrella solo aparece durante el primer segundo.
.f1 .estrella {
animation: estrellasFugaces_1 5s 7s infinite normal;
-moz-animation: estrellasFugaces_1 5s 7s infinite normal;
-webkit-animation: estrellasFugaces_1 5s 7s infinite normal;
}
Por último, el JavaScript
function aleatorio(inferior,superior) {
numPosibilidades = superior - inferior;
aleat = Math.random() * numPosibilidades;
aleat = Math.round(aleat);
return (parseInt(inferior) + aleat);
}
function muestra(capa) {
var height=1000; var width=1000;
document.getElementById(capa).style.left=aleatorio(width,0);
}
jQuery(document).ready(function(){
setInterval("muestra(\'espacio1\');",2000);
});
Ejecutando la función muestra() a intervalos, una vez cargada la página, sobre cada una de las estrellas conseguimos una sensación de aparición aleatoria en el firmamento.
Ahora ya queda de vuestra mano y vuestra imaginación el jugar con diferentes tamaños, colores e intervalos en las animaciones para conseguir el efecto deseado.
No hay entradas relacionadas.