Mask´s -> como en Flash, pero HTML5 + CSS3 or whatever

Como vengo siguiendo las ediciones de mejorando.la pienso en la manera
de transcribir un sitio en Flash a Html 5 + CSS3 + Jquery
(que son el presente, y no el futuro, etc)...

Pero utilizo máscaras circulares...
Ustedes saben...

Código ActionScript :

mi_clip.setMask(mi_mascara);
// donde mi_mascara es un círculo
// si fuera un cuadrado usaría overflow hidden y ya.

Busqué por ahí, pero, aún hoy, no encontré la solución (ni por la punta)...

Podría tener, por ejemplo:

Código HTML :

<div id="mi_maskara svg">
<div id="container">
<div class="imges"><img src="img1.jpg" alt="" width="220" height="140" /></div>
<div class="imges"><img src="img1.jpg" alt="" width="220" height="140" /></div>
<div class="imges"><img src="img1.jpg" alt="" width="220" height="140" /></div>
</div>
</div>

Y qué quedaría para animar esa máscara como se anima en Flash...?

Bueno para crear una mascara en HTML primero tienes que crear un div, que sería como un movieclip en flash, y ponerle un id (nombre de instancia en Flash) ej.

Código HTML :

<div id="mascara"></div>

y en css ponerle las siguientes propiedades:

Código :

#mascara{   
   clip:rect(0 100px 100px 0);
   position:absolute;
}

con esto crearás una macará y cualquier cosa que le pongas al div, solo será visible en una área de 100px por 100px desde la parte superior derecha (totalmente configurable), busca mas sobre clip:rect.

Para animaciones simples puedes usar en jquery ej:

Código Javascript :

$('#imagenej').css({ marginLeft: '-700px'}).animate({ marginLeft: '0px',}, 1000, function(){});

el cual desplaza la imagen de -700 izq hasta 0, mira la pagina siguiente para mas sobre las animaciones en jquery: http://www.tinnta.com/animar-pagina-html-con-10-simples-lineas-de-codigo-jquery/

Puedes mirar el siguiente ejemplo de mascaras con Jquery un poco mas avanzado

http://www.tutorialesenlaweb.com/2010/08/efecto-mascara-con-jquery/

Genial!!!
Exactamente eso!

Gracias, y manos a la obra!!!

sgb004, si te interesa podes hacer un tutorial acerca de máscaras, si pasa la calidad se publica en la portada de cristalab.

saludos

Bueno, ahy tengo como 3 tutoriales, esperando en cuanto tenga tiempo publicaré primero el de mascaras.

nos vemos.

sgb004 escribió:

genial!!! saludos!