logo El diario de Pepe Molina (Caricatos)

yo

Vamos a definir un objeto con todas las características que necesitamos para las transiciones.


Ú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

Tres podrían guardar un secreto si dos de ellos hubieran muerto

Benjamin Franklin, estadista y científico estadounidense (1706-1790).


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

Transiciones: El Objeto

emoticón de Caricatos Publicado el día 01 de noviembre de 2011
id=50; categorías: Vicisitudes de un Webmaster, Programación

pintor Vamos a definir un objeto con todas las características que necesitamos para las transiciones. En el sistema deben realizarse las transiciones con algunos valores constantes como el tamaño (anchura y altura), la duración (en este caso en milisegundos) y el número de fotogramas o transiciones intermedias. También es bueno conocer las capas u objetos participantes, el elemento contenedor y el que esté visible o activo en cada momento.

El objeto

Nuestro objeto en su creación deberá a la vez tener preparadas cosas adicionales que también comentaremos.

function objetoTransiciones(l, f, an, al, c, v, b)	{
	this._lapsus_ = l;// milisegundos de la transición
	this._fotogramas_ = f;// número de fotogramas por _lapsus_
	this._escala_ = l / f;
	this._tiempos_ = [];
	this._acciones_ = [];
	this._ancho_ = an;// anchura de la zona de transición
	this._alto_ = al;// altura de la zona de transición
	this._capas_ = c;// array con el id de las capas afectadas
	this._visible_ = v;// primera capa visible al inicio. Se actualizará en cada transición...
	this._base_ = b;// contenedor de las capas
	_resguardamos = tag(this._visible_).cloneNode(true);
	tag(this._visible_).parentNode.removeChild(tag(this._visible_))
	tag(this._base_).appendChild(_resguardamos);
	this.id_temp = "objetoTransiciones_" + Math.random() * 1000;
	capa_temp = document.createElement("div");
	capa_temp.style.position = "absolute";
	capa_temp.id = this.id_temp;
	tag(this._base_).appendChild(capa_temp);

	this._limpiar_ = function()	{
		while (tag(this.id_temp).hasChildNodes())
			tag(this.id_temp).removeChild(tag(this.id_temp).firstChild);
	}

	this.asignaciones = function(x)	{
		_resguardar = tag(this._visible_).cloneNode(true);
		tag(this._visible_).parentNode.removeChild(tag(this._visible_));
		tag(this._base_).appendChild(_resguardar);

		_resguardar = tag(x).cloneNode(true);
		tag(x).parentNode.removeChild(tag(x));
		tag(this._base_).appendChild(_resguardar);

		//alert(x);
	}
}

Vemos que aparte de los elementos mencionados, se añade durante la creación del objeto una capa que nos será de gran utilidad en algunas transiciones. Puede resultar extraño que no se distingue ninguna transición, pero ese asunto lo explicaremos a continuación.

Primera transición: fundido

Cada transición se irá añadiendo al sistema con definiciones externas como vemos en el caso del "fundido", cuyo efecto ya hemos explicado anteriormente: "Transiciones: Introducción" y "Rollover fundido".

objetoTransiciones.prototype.fundido = function(x)	{
	this._limpiar_()
	if (x == this._visible_)	{
		return;
	}
	else	{
		this.asignaciones(x);
		this._visible_ = x;
		tag(x).style.opacity = "0";
		tag(x).style.top = "0";
		tag(x).style.left = "0";

		for (i = 0; i <= this._lapsus_; i += this._escala_)
			setTimeout("tag( + x + ).style.opacity = " + (i / this._lapsus_), (i / this._lapsus_) * this._lapsus_);
	}
}
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
Postal Digital
Postal Digital

Ya con estas definiciones podemos mostrar nuestras primeras pruebas en un principio con las miniaturas de postales que vemos a la derecha de este párrafo. Solo nos queda poner un par de elementos "calientes", para pinchar y que funcione la transición. Como las capas que hemos usado las hemos identificado con los nombres mini1 y mini2, los enlaces tendrán nombres similares: miniatura 1 y miniatura 2. Para mejorar la semántica de la página, los enlaces son reales, y se pueden editar las postales abriéndolos en una ventana o pestaña nueva.

Otra característica de este objeto es que pueden crearse varios objetos en una misma página... que tal si lo vemos "ampliado":

dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
dibujo
Postal Digital
Postal Digital

Evidentemente pueden convivir todos los objetos que deseemos, aunque no creo que sea aconsejable llenar una página con estas transiciones.

Futuras entregas

No sé exactamente el orden de publicación de las próximas transiciones, pero puedo adelantar de qué tipo y cómo podrán ser:

Desplazamiento: Se ponen las dos capas posicionadas de forma contigua en un mismo contenedor, desplazando este último.

En el caso de arriba nos hemos despreocupado del desbordamiento (estilo overflow), pero en el recuadro siguiente lo implementamos.

Apertura y cierre: Se ponen las dos capas posicionadas de forma contigua pero solo una se muestra.

Consideraremos apertura, cuando la capa visible descubre la oculta, y viceversa.


Barrido: Horizontal o vertical, también podrían considerarse de apertura o cierre, aunque el efecto visual sería igual, por lo que solo implementaremos el tipo apertura, que comentaremos a su debido tiempo.

Mosaico: Se muestran u ocultan pequeños recortes de cada capa.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.50) 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 3307 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..

http://www.pepemolina.com/postales/Fondos/FONDO010.gif
http://www.pepemolina.com/postales/Navidad/TgC_Navidad_31.gif
http://www.pepemolina.com/postales/Navidad/snow_anm.gif
http://www.pepemolina.com/postales/Navidad/xmastree2.gif
enlace a la postal
Copyright © 2002-2018 www.pepemolina.com
RSS rss | Ver Mapa del sitio