logo El diario de Pepe Molina (Caricatos)

yo

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

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

¡Si Dios me hiciera una clara señal! como hacer un gran depósito a mi nombre en un banco suizo

Woody Allen, actor y director estadounidense (1935).


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


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


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


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


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


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


botón pay-pal

Burbujas de colores

emoticón de Caricatos 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.

Logo

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.

bola roja

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.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.63) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 3342 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

../diario.imagen.php?id=75&amp;max=300
¡Felix Navidad!
¡Felix Navidad!
enlace a la postal
Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio