En el tema
imagen redonda
hay una mención al uso de
border-radius para crear formas irregulares con CSS.
Si bien le animación de estas figuras se podría hacer también con CSS-Script, cuando hay que hacer ajustes muy finos prefiero usar JS, que me da más dominio sobre los movimientos.
Ésta es una prueba, un experimento previo a un efecto que todavía no empecé; pero ya que lo tengo hecho, lo posteo por si a alguien le interesa estudiarlo.
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>MANCHA VORAZ.</title>
<script type="text/javascript">
var A = [11, 1 , 22, 1 , 33, 1 , 44, 1 , 55, 1 , 66, 1 , 77, 1 , 88 , 1]
function C(V) {
var R;
A[V + 1] = (A[V] < 10 || A[V] > 90) ? A[V + 1] * -1 : A[V + 1];
R = A[V] = A[V] + (3.6 * A[V + 1]);
return R;
}
function O() {
document.getElementById("amorfo").style.borderRadius = ''+C(0)+'% '+C(2)+'% '+C(4)+'% '+C(6)+'% / '+C(8)+'% '+C(10)+'% '+C(12)+'% '+C(14)+'% '
setTimeout(O, 100);
}
onload = O;
</script>
<style type="text/css">
</style>
</head>
<body style="background: gray">
<h2>Forma irregular CSS animada con JS. (Sin <code>canvas</code>.)</h2>
<div style="border: 50px olive inset; width: 500px; background: white; margin: auto;
position: relative;">
<span style="position: absolute; right: -100px; font-size: 100px; color: navy;">*</span>
<div id=amorfo style="background:black; width: 500px; height:300px; border-radius: 0;"></div>
</div>
<div style="margin: 50px auto; text-align: center; font-size: 150px; line-height: 0.25em;
white-space : nowrap;">
· · · · · · · ·<br>
· · · · · · · · ·<br>
· · · · · · · · · ·
</div>
<p style="background: white">
<span style="color: navy; font-size: 200%; float: left; margin-top: -0.2em">*</span>
Homenaje a "<strong>The Blob</strong>", Irvin Yeaworth, 1958.</p>
</body>
</html>
Lo que hace es modificar cada 100ms el estilo de un
div en sus 8 valores de
border-radius de forma progresiva, hasta que se llega a los límites de ancho y alto, entonces, si se los aumentaba ahora se los disminuye; o viceversa.
Una función aplica los estilos, y otra crea los valores usando un
array donde está cada uno de los porcentajes de radio y un valor asociado (que será +1 ó -1 dependiendo de si ese valor está 'subiendo' o 'bajando'). Todos arrancan con 1 y se agrandan, hasta que llegan al límite, y entonces se convierten en -1 para achicarse.
El uso de decimales para sumar a los porcentajes de radio (3.6) está sólo para que el dibujo parezca más irregular en su animación paso a paso.
P.D. : Y ahora no me digan que no estoy mejorando en mis homenajes.
