Micaela 25 de junio de 2009 a las 09.15
   Imprimir artículo
elWebmaster.com

Efectos en videos con CSS


css31Todos sabemos bien que CSS es un mecanismo simple, una forma de descripción de estilos que ofrece a los desarrolladores el control total sobre el estilo y formato de sus documentos.

Es por eso que hoy gracias a algunas nuevas propiedades de WebKit Nightly, específicamente la propiedad de efectos CSS con HTML5 video, les traemos este interesante efecto CSS para que implementen en sus archivos de video.

Con un poco de CSS como el que está a continuación, podremos lograr el bonito efecto de reflejo vivo en HTML5 video (el cuál reproduce un .mov a elección)

CSS

.reflector
{
-webkit-box-reflect: below 1 -webkit-gradient(linear, left top, left bottom, color-stop(0.5, transparent), color-stop(1.0, rgba(255, 255, 255, 0.5)));
}
.fader
{
-webkit-transition-property: opacity;
-webkit-transition-duration: 550ms;
-webkit-transition-timing-function: ease-in-out;
}

En sólo unas pocas líneas de jQuery construimos el listado de películas, luego haremos fade in en el video y lo reproduciremos todo con un con un solo clic,  con ayuda de este código Javascript:

JAVASCRIPT

jQuery.map(movies, function (movie)
{
var thumb = jQuery(‘<a href=”#” title=”‘ + movie.title + ‘”><img src=”‘ + movie.thumb + ‘” class=”reflector” /></a>’);
thumb.click(function ()
{
var video = jQuery(‘<video id=”cell” autoplay=”true” class=”fader reflector” />’).get(0);
video.style.opacity = 0;
jQuery(“#holder”).empty().append(video);
video.addEventListener(“loadstart”, function ()
{
jQuery(body).addClass(“darker”);
setTimeout(function ()
{
jQuery(menu).css(“visibility”, “hidden”);
video.style.opacity = 1;
}, 550);
}, false);
jQuery(video).attr(“src”, movie.link);
var finished = function ()
{
video.style.opacity = 0;
setTimeout(function ()
{
video.pause();
jQuery(menu).css(“visibility”, “visible”);
jQuery(body).removeClass(“darker”);
}, 550);
return false;
}
video.addEventListener(“ended”, finished, false);
jQuery(video).click(finished);
return false;
});
jQuery(“#menu”).append(thumb);
});

Fuente: Ajaxian


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder