Editando apunte: Transiciones: Introducción

Editando apunte: Transiciones: Introducción cerrar apuntes

ID: 47 (tabla: apuntes) Título:
Fecha: [poner fecha actual ]
Categorías: Vicisitudes de un Webmaster, Programación
Etiquetas: imágenes, javascript, postales, webmaster
Extras: imágenes, javascript, postales, webmaster
apunte: - - - - - - - -

<p>
	[rss]Las transiciones que más vemos suelen hacerse con un par de fotos (o cualquier tipo de imagen), pero nosotros plantearemos las transiciones entre capas (elementos div) de una página web.[/rss]
</p>
<p>
	Los elementos que vamos a usar son las postales que se pueden ver en esta página, pero con otra escala (100%). Nos hemos ayudado de un comodín que hemos llamado postal, y para ver la postal adjunta podemos pinchar en el siguiente enlace: <a href="diario.jocker.php?extra=postal&id=3&PHPSESSID=26uubh4q1ukmvd0e66498u52k4">Feliz Navidad</a>
</p>
<div style="margin: 1em auto; position: relative; border: 3px ridge blue; width: 480px; height: 360px; overflow: hidden">
	<div id="capa1" style="background-color: #ffff00; position: absolute; top: 0; left: 0; width: 480px; height: 360px; border:">
		<div class="imagen" style="top: 0px; left: 0px; width: 480px; height: 360px; position: absolute">
			<img src="diario.imagen.php?id=2" title="../diario.imagen.php?id=2" style="width: 100%; height: 100%" alt="dibujo"/> 
		</div>
	</div>

<div id="capa2" style="background-color: #ccffff; position: absolute; top: 0; left: 0; width: 480px; height:360px;">
		<div class="imagen" style="top: 0px; left: 0px; width: 480px; height: 360px; position: absolute">
			<img src="postales/Fondos/santa.gif" title="postales/Fondos/santa.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div class="imagen" style="top: 182px; left: 329px; width: 73px; height: 35px; position: absolute">
			<img src="postales/animales/gato8t.gif" title="postales/animales/gato8t.gif" style="width: 100%; height: 100%" alt="dibujo"/>
		</div>
		<div class="texto" style="top: 276px; left: 0px; width: 300px; height: 20px; position: absolute">
			<div style="font-family: Trebuchet MS; color: #000000; font-style: normal; font-weight: 900; text-align: center; font-size: 40px" title="texto" >
				Feliz Navidad
			</div>
		</div>
		<div class="texto" style="top: 278px; left: 2px; width: 300px; height: 20px; position: absolute">
			<div style="font-family: Trebuchet MS; color: #ff0000; font-style: normal; font-weight: 900; text-align: center; font-size: 40px" title="texto" >
				Feliz Navidad
			</div>
		</div>
	</div>

<div id="capa3" style="background-color: transparent; position: absolute; top: 0; left: 0; width: 480px; height: 360px;" title="Pulse el botón para ver el efecto fundido" >
	</div>
</div>
<div style="text-align: center; margin: 1em">
<button type="button" id="aclarar">
	transición "fundido"
</button> 
<button type="button" id="oscurecer" style="display: none">
	transición "fundido"
</button> 
</div>
<p>
	Lo cierto es que detrás de la postal que estamos viendo (id=3), tenemos otra (id=2), pero la que vemos la está tapando. Podemos probar el efecto fundido para destaparla, pinchando en el botón adjunto (solo activo en el modo apunte (<a href="?titulo=Transiciones%3A+Introducci%F3n&PHPSESSID=26uubh4q1ukmvd0e66498u52k4">Transiciones: Introducción</a>).
</p>
<h3 class="subtitulo">
	Una sola línea
</h3>
<p>
	En una discusión de los foros del web (ver sector "Mis recomendaciones") afirmaba que hay efectos que pueden hacerse con <a href="http://www.forosdelweb.com/f91/jquery-flash-950928/#post4014999">una sola línea</a>, y viendo el código que hemos aplicado la línea en cuestión es ésta:
</p>
<pre class="codigo">for (i = 1; i > 0; i -= .04)	setTimeout('tag("capa2").style.opacity = ' + i, 1000 - (i * 1000));</pre>
<p>
	En el código tenemos algunas líneas más pero que no pertenecen a la transición, como la inhabilitación del botón durante la transición (evitando a los odiosos "dedos flojos"), o la inicialización necesaria para la transición inversa que seguramente con lo visto, cualquiera puede ser capaz de implementarla.
</p>
<p>
	Analizando el código línea a línea (¡Je, je!) nos encontramos con un bucle desde uno (1) hasta cero (0), con intervalos decrecientes de 0.04, o sea que tendremos 25 números (0.96, 0.92, 0.88, ..., 0.08, 0.04, 0.0) que serán los veinticinco (25) valores intermedios de opacidad de la capa visible que terminarán dejándola invisible; y la temporización va desde cero (1000 - (1 * 1000)), hasta mil (1000 - (0 * 1000)), o sea que el valor mayor en la temporización será 1000 milisegundos (o sea un segundo).
</p>
<p>
	Para decidir que sean veinticinco (25) transiciones intermedias no hemos hecho ningún tipo de estudio científico, ni de mercado, tan solo hemos considerado que las películas digitales suelen tener ese número de fotogramas por segundo (seguro que algún estudio científico hay detrás).
</p>
<h3 class="subtitulo">
	Algunas consideraciones
</h3>
<p>
	Este sencillo ejemplo no es suficiente si queremos crear una librería de transiciones como en nuestra página sobre <a href="imagenes?PHPSESSID=26uubh4q1ukmvd0e66498u52k4">Imágenes</a> (desplegar el "Proyector de diapositivas"), pero vamos a renseñar unas pocas pautas para ello:
</p>
<ul>
	<li>
		Las transiciones serán siempre entre dos (2) capas
	</li>
	<li>
		El tiempo de la transición será siempre el mismo
	</li>
	<li>
		Las capas deben ser del mismo tamaño
	</li>
	<li>
		La capa visible conservará sus zonas calientes (enlaces, titles, efectos...)
	</li>
</ul>
<p>
	En la transición de ejemplo de esta página no se consideran cosas importantes como la zonas calientes. Además, para albergar diversas transiciones tendremos que trabajar con objetos que aún no hemos definido.
</p>

Controles Otras tablas: imagenes, postales, categorias, etiquetas, extras - - (popup ) - que

Seleccionar nuevo apunte

categoria Nombre:
Controles Otras tablas: apuntes, imagenes, postales, etiquetas extras - - Seleccionar: categoria
Descripción: - - - - - - - -	Apuntes

extra Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias etiquetas - - Seleccionar: extra
Descripción: - - - - - - - -	Apuntes

etiqueta Nombre:
Controles Otras tablas: apuntes, imagenes, postales, categorias extras - - Seleccionar: etiqueta
Descripción: - - - - - - - -	Apuntes

Editor del diario

Zona de comentarios

Evaluación