El diario de Pepe Molina (Caricatos)

Vamos a crear el efecto de burbujas de colores de fondo del recuadro adjunto.

Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

RSS de las imágenes:

La Cita

La habilidad y la constancia son las armas de la debilidad

Nicolás Maquiavelo, político y escritor latino (1469 - 1527).

En esta zona están las páginas personales del autor.

Mis Enlaces

Mis clientes ahora también son mis amigos (aunque les cobre).

Mis Clientes

En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..

Mis Amigos Informáticos

En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)

Mis Amigos Artistas

Las recomendaciones que proponemos son de índole variada.

Mis recomendaciones

Aquí un cajón de sastre de enlaces.

Interés General

Nos referencian desde sitios de toda índole.

Referencias externas

Puede contribuir a mantener esta página con su donativo.

Burbujas de colores

Publicado el día 29 de diciembre de 2011
id=63; categorías: Vicisitudes de un Webmaster, Programación

Este fondo será distinto en cada ocasión, pero la forma de conseguirlo será la misma: añadiendo burbujas de tamaño, posicionamiento y color aleatorio.

Para poder distinguir el contenido del recuadro hemos dado una mínima opacidad a cada burbuja nueva que se añade (0.1), a la vez que el texto está bastante enfatizado.

En próximos apuntes intentaremos generar fondos estáticos basados en esta técnica. Esperamos que les sea de utilidad.

(0 burbujas generadas)

Vamos a crear el efecto de burbujas de colores de fondo del recuadro adjunto. Para conseguir el efecto debemos obtener el tamaño del sitio donde se aplicará (altura y anchura), y simplemente obtener valores aleatorios para el tamaño y posicionamiento restringidos con esos datos y el color también lo obtendremos aleatoriamente.

En realidad tan solo debemos preocuparnos de que las imágenes generadas no queden fuera de la zona visible, ni genere desplazamiento (scroll), y en este caso hemos usado estilos "css" (overflow: hidden).

Pero en este apunte lo que nos interesa es poder conseguir burbujas de colores, así que nos centraremos en ello. Ya hemos publicado el código que lo genera en el apunte "Áreas poligonales para efecto rollover", pero tenemos que obtener las variables necesarias.

La burbuja roja que vemos junto a este párrafo tiene tanto de altura como de anchura 81 píxeles, la figura es un círculo (shape=circle) y sus coordenadas son: "coors=40,40,40". Sobre sus colores, evidentemente se trata de borde negro (000000) y relleno rojo (FF0000).

Podríamos preguntarnos ¿por qué 81 y no 80?, y la respuesta la daremos con los valores que generamos de forma aleatoria en el recuadro grande:

function burbujear()	{
	color_burbuja = color_aleatorio();
	radio_burbuja = 10 + Math.floor(Math.random() * (radio_max - 10));
	diametro_burbuja = radio_burbuja * 2 + 1;
	burbuja = document.createElement("img");
	url = "diario.jocker.php?extra=pngshape&shape=circle&borde=000000&relleno=" + color_burbuja;
	url += "&ancho=" + diametro_burbuja;
	url += "&alto=" + diametro_burbuja;
	url += "&coors=" + radio_burbuja;
	url += "," + radio_burbuja;
	url += "," + radio_burbuja;
	burbuja.src = url;
	burbuja.style.position = "absolute";
	burbuja.style.opacity = ".1";
	sup = (Math.floor(Math.random() * (alto_max + radio_burbuja)) - radio_burbuja) + "px";
	burbuja.style.top = sup;
	izq = (Math.floor(Math.random() * (ancho_max + radio_burbuja)) - radio_burbuja) + "px";
	burbuja.style.left = izq;
	tag("capa_burbujas").insertBefore(burbuja, tag("primera_capa_burbujas"));
	tag("n_burbujas").innerHTML = ++burbujillas;
	if (burbujillas < 20) setTimeout(burbujear, 2500);
}

Podemos ver que primero generamos el radio de la burbuja (un círculo), y a partír de ese valor obtenemos el diámetro duplicándolo y sumándole una unidad, por una razón sencilla: deberá existir el mismo número de puntos a ambos lados del centro en el diámetro de la burbuja.

<< primer apunte < apunte anterior apunte siguiente > último apunte >>