|
||||
|
|
|
|
|
|
|
|||
|
|
|||
|
||||
Home - DHTML - Clipeando una capa - 1 - 2 - 3
Clipeando una capa (III)
por Luciano Moreno, del departamento de diseño web de BJS Software.
Clipeo contínuo.-
Bien, amigos. Llegados a este punto, vamos a ver ahora cómo podemos clipear una capa de forma contínua, es decir, construir una función que vaya recortando la capa un número de pixels fijado cada cierto periodo de tiempo, de tal forma que conseguiremos un efecto de movimiento en el recorte, efecto a veces muy atractivo en una página web.
Y una vez vistos los conceptos de los capítulos anteriores, lo que nos queda es fácil, así que directamente os doy el código necesario, y luego lo comentamos un poco:
<html>
<head>
<style type="text/css">
#capa{
position:absolute;
top:20px;
left:200px;
width:150px;
height:20px;
clip:rect(0,150,20,0);
background-color:red;
layer-background-color:red;
}
</style>
<script language="JavaScript" type="text/javascript">
var anchoTemp=0, n=0;
function
recorta()
{
if(document.all)
{
n++;
anchoTemp=(parseInt(document.all['capa'].style.width))-(n*5);
if(anchoTemp>=10)
{
document.all['capa'].style.clip="rect(0,"+anchoTemp+",250,0)";
setTimeout("recorta()",50);
}
}
else
if(document.layers)
{
n++;
anchoTemp=250-(n*5);
if(anchoTemp>=10)
{
document.layers['capa'].clip.right=anchoTemp;
setTimeout("recorta()",50);
}
}
else
if(document.getElementById)
{
n++;
anchoTemp=(parseInt(document.getElementById('capa').style.width))-(n*5);
if(anchoTemp>=10)
{
document.getElementById('capa').style.clip="rect(0,"+anchoTemp+",250,0)";
setTimeout("recorta()",50);
}
}
}
</script>
</head>
<body>
<div id="capa" style="width:250px;height:20px;clip:rect(0,250,20,0);"></div>
<a href="#" onClick="recorta('capa',0,50,150,0); return false;">recorta</a><br><br>
</body>
</html>
Comentarios:
1) Definimos una capa mediante su id único, y en los estilos le damos una posición absoluta, un ancho y una altura, y la clipeamos con estas medidas iniciales.
2) Vamos a ir recortando una de las dimensiones, en este caso el ancho visible, y para ello definimos una variable anchoTemp que va a ir almacenando el valor del clipeo derecho (clip right) en cada paso de la operación. A los valores posibles de esta variable les vamos a asignar un límite inferior de 10 pixels, que será lo que al final se verá del ancho total de la capa.
3) Como necesitamos valores numéricos dentro de la expresión clip:rect(a,b,anchoTemp,d) y para hacer las operaciones de resta en la función, vamos a obtener en cada vuelta el valor numérico del ancho de ésta, y para ello utilizamos el método parseInt(variable), que nos devuelve los dígitos que hay en una variable, empezando por la izquierda y finalizando cuando se encuentre el primer caracter no numérico, es decir, en el caso de ser parseInt("150px") nos devolverá 150.
4) En cada llamada a la función recorta() clipeamos la capa 5 pixels más.
5) Llamamos una y otra vex a la función mediante el método setTimeout("funcion()",tiempo), que llama a la función argumento al cabo del número de milisegundos dado por el argumento tiempo. Así conseguimos que la funcisn se llame a sí misma cada 50 milisegundos.
6) La combinación rec orte de 5 pixels - 50 milisegundos es la que consigue el efecto de recorte dinámico que buscábamos.
El resultado del código anterior podéis verlo pinchando aquí.
Eso es todo, amigos. Espero que hayáis aprendido qué es, cómo se accede y cómo se cambia la propiedad clip de CSS.
 |