logo El diario de Pepe Molina (Caricatos)

yo

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.

Ú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

Hay más lagrimas derramadas sobre oraciones respondidas que sobre oraciones sin respuesta

Sta. Teresa de Ávila, monja; mística y escritora española (1515-1582).

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: Introducción

emoticón de Caricatos Publicado el día 20 de octubre de 2011
id=47; categorías: Vicisitudes de un Webmaster, Programación

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.

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: Feliz Navidad

dibujo
dibujo
dibujo
Feliz Navidad
Feliz Navidad

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 (Transiciones: Introducción).

Una sola línea

En una discusión de los foros del web (ver sector "Mis recomendaciones") afirmaba que hay efectos que pueden hacerse con una sola línea, y viendo el código que hemos aplicado la línea en cuestión es ésta: 

for (i = 1; i > 0; i -= .04)	setTimeout('tag("capa2").style.opacity = ' + i, 1000 - (i * 1000));

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.

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).

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).

Algunas consideraciones

Este sencillo ejemplo no es suficiente si queremos crear una librería de transiciones como en nuestra página sobre Imágenes (desplegar el "Proyector de diapositivas"), pero vamos a renseñar unas pocas pautas para ello:

  • Las transiciones serán siempre entre dos (2) capas
  • El tiempo de la transición será siempre el mismo
  • Las capas deben ser del mismo tamaño
  • La capa visible conservará sus zonas calientes (enlaces, titles, efectos...)

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.

Zona de comentarios

Hemos encontrado 1 comentarios.

#Mensaje enviado por Pepe Molina (Caricatos)
Comentario escrito el día 21 de octubre de 2011, a la hora 09:31:03

Hola:


Entre las consideraciones falta indicar que las operaciones es mejor hacerlas con números enteros, evitando hacer calculos con reales, debido a la deficiente implementación de esos cálculos con javascript (hemos retocado la línea de código resaltada en este apunte).


Saludos mi emoticón

Evaluación

Valoración de esta página: (apunte.47) 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 7917 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/clipart/fondos/BCKGRD44.svg
http://www.pepemolina.com/clipart/fondos/1673.svg
http://www.pepemolina.com/postales/aves/ocellot2.gif
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio