Todos 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
Comentarios recientes
- diego gutierrez arias: excelente todo le q se publica en esta pagina, es de mucha ayuda, mi pro...
- christian: Hola alguien puede pasarme los archivos ? desde ya gracias quiero probar...
- Iruma: Pues vaya que todos tienen muchas cosas que contar... Yo les puedo decir...
- A2design: Seamos realistas... hay gente que paga por usar un programa... pero yo m...
- A2design: 驴no usar gif??? desde cuando...? la consigna es no usar flash que no se...
- lara: EXELENTEEEEE...
Feed de los comentarios