Nuevo Desafío: Transición entre 2 imágenes

caricatos · #1 (**permalink**) 06/07/2010, 02:35

Hola:

Iniciamos oficialmente el nuevo desafío, votado en este mensaje: Elección del próximo desafío.

Los que piensen participar que nos lo hagan saber, la lista provisional es la siguiente:

Los resultados se expondrán a partir del lunes 19 de Julio.

Aunque no sea obligatorio, se puede indicar el efecto que se quiere implementar, y en el caso de los 3 participantes hasta el momento, nos hemos decidido por un efecto mosaico (en cualquiera de sus variantes (en principio yo he pensado en un afecti aleatorio).

Las condiciones son:

Que funcione en los navegadores más importantes
que pueda aplicarse a cualquier tamaño (en pricipio igual para las dos)
Código propio (sin librerías)
reutilizable

Y los trabajos presentados son:

Saludos

Panino5001 · #2 (**permalink**) 06/07/2010, 05:51

Yo me apunto. No usaré mosaicos seguro, aunque aún no decido qué es lo que voy a hacer.

stock · #3 (**permalink**) 06/07/2010, 11:00

Excelente!! tengo apenas unas 150 lineas de código y todavía no hago ningún efecto, recién termine el wrapper para un elemento del DOM estoy viendo como hacer la parte de las animaciones.

Por cierto, yo agregaría otra regla:

- Que sea reutilizable

Saludos y suerte a todos :)

#4 (**permalink**) 06/07/2010, 14:36

No estoy seguro de que pueda llegar a completarlo, pero algo presentaré

pato12 · #5 (**permalink**) 06/07/2010, 16:15

No entiendo bien lo que hay que hacer :S.. alguien me explica por favor

Carlangueitor · #6 (**permalink**) 06/07/2010, 16:33

Tienes que hacer una transición entre dos imágenes, un efecto por así decirlo, lo más sencillo es fade in, mira este ejemplo: http://sandbox.leigeber.com/javascript-slideshow/ más o menos es lo que se propone, no es necesario poder seleccionar las imágenes, solo hay que hacer la transición.

Te dejo el texto original de caricatos:

Cita:

Por cierto, añadí otra propuesta que va de crear transiciones entre 2 imágenes (o tal vez capas)... que ya el lightbox está muy visto, la idea es cambiar el fundido por alguno más original, como ele efecto mosaico, o alguno que se les ocurra que crean que es original... yo tengo algo hecho por algún lado, y si progresa el desafío lo vemos.

Saludos

pato12 · #7 (**permalink**) 06/07/2010, 16:48

Ah, bueno gracias.. me apunto :P

caricatos · #8 (**permalink**) 07/07/2010, 01:39

Hola:

Gracias a los que se han apuntado, y espero que disfruten en el desarrollo, y sobre todo que disfrutemos compartiendo nuestros "secretos" en esta implementación.

Acabo de actualizar las listas de participantes y de condiciones, supongo que se me ha quedado algo en el tintero, así que ¡vayan disparando

!

Sobre el plazo, creo que puede ser suficiente, pero si faltan algunos días, pienso que a lo largo de la semana de presentación al menos se podrá exponer algo presentable, y los que ya tenemos el código, podemos buscar las variantes que se nos ocurran.

También supongo que el tema de "ser reutilizable", no nos debería ser problema, pero mejor lo dejamos para el tiempo del debate.

Saludos

America|UNK · #9 (**permalink**) 07/07/2010, 09:22

Hola, me apunto, pues supongo todos los participantes harán el efecto mosaico, con respecto al fadeIn/Out de 2 imágenes sería algo muy simple para llamarlo "desafío", mi propuesta es que todos hagan el mismo efecto.

Por cierto hay diferentes tipos de mosaico (lineas horizontales/verticales/cuadrados), supongo el de los cuadrados sería un gran desafío, si señor :P

stock · #10 (**permalink**) 07/07/2010, 16:28

Yo intentaré hacer el efecto de Lineas verticales, lineas horizontales, cuadrados y algunas variantes mas, hasta ahora ya tengo casi listo mi motor de animación :)

Por cierto, supongo que navegadores mas importantes son:

- Chrome 5
- Firefox 3
- Safari 4
- IE7
- IE8

Algún otro?

saludos

pato12 · #11 (**permalink**) 08/07/2010, 08:15

Una pregunta, puedo usar un código de animación que hice hace tiempo? (es propio)

stock · #12 (**permalink**) 08/07/2010, 08:30

Yo no le veo problema siempre y cuando lo hallas hecho tu :)

Saludos

caricatos · #13 (**permalink**) 09/07/2010, 19:45

Cita:

Iniciado por stock

...

Por cierto, supongo que navegadores mas importantes son:

- Chrome 5
- Firefox 3
- Safari 4
- IE7
- IE8

Algún otro?

saludos

Faltaba Opera Unite, aunque si va bien en los navegadores de tu lista, en Opera seguro que se verá bien.

Saludos

ClubIce · #14 (**permalink**) 09/07/2010, 20:10

Estoy realizando un Framework de Animaciones y Efectos...

¿Importa si coloco algunas funciones de este para hacer mi efecto?

PD: Ya habia realizado algunas transiciones de images propias :P

abimaelrc · #15 (**permalink**) 09/07/2010, 20:20

El desafío se trata de que todo lo hayas hecho tú. Me imagino que aquella persona que use algún framework que no lo haya hecho será descalificado. Por lo tanto si lo hiciste tú, no debe haber problemas. Para eso es el desafío para que muestren como lo haría cada persona.

pato12 · #16 (**permalink**) 09/07/2010, 20:39

Tanto hay que esperar :|.. faltan 10 días :(.. yo ya hice 5 efectos distintos y no se cual es el mejor xD..

stock · #17 (**permalink**) 10/07/2010, 22:25

Cita:

Iniciado por pato12

... yo ya hice 5 efectos distintos y no se cual es el mejor xD..

Yo solo he tenido tiempo de hacer uno, pero planeo presentar mas :)

saludos

caricatos · #18 (**permalink**) 15/07/2010, 03:14

Hola:

Acabo de actualizar la lista de participantes, espero que si hay alguien más nos avise.

Cita:

Iniciado por America|UNK

... mi propuesta es que todos hagan el mismo efecto.

Por cierto hay diferentes tipos de mosaico (lineas horizontales/verticales/cuadrados), supongo el de los cuadrados sería un gran desafío, si señor :P

Sobre lo de hacer el mismo desafío, limitaría mucho la iniciativa y originalidad de los trabajos, y se tenía que haber propuesto en el mensaje de las propuestas.
Y sobre la forma de nombrar los efectos, los horizontales y verticales, creo que yo los llamaría efecvto persiana, o algo así...

Cita:

Iniciado por ClubIce

Estoy realizando un Framework de Animaciones y Efectos...

¿Importa si coloco algunas funciones de este para hacer mi efecto?

PD: Ya habia realizado algunas transiciones de images propias :P

La respuesta te la dió abimaelrc en el siguiente mensaje... y supongo que muchos de nosotros también ha creado alguna que otra transición anteriormente, yo pensaba presentarlas en los mensajes de debate posteriores a la presentación de los resultados.

Cita:

Iniciado por abimaelrc

El desafío se trata de que todo lo hayas hecho tú. Me imagino que aquella persona que use algún framework que no lo haya hecho será descalificado. Por lo tanto si lo hiciste tú, no debe haber problemas. Para eso es el desafío para que muestren como lo haría cada persona.

Respuesta acertada... por cierto, no sabemos si piensas participar (¡Anímate!)

Cita:

Iniciado por pato12

Tanto hay que esperar :|.. faltan 10 días :(.. yo ya hice 5 efectos distintos y no se cual es el mejor xD..

¡Je!, A la primera me salió algo presentable, y me está faltando tiempo para implementar las variantes, aunque más o menos las tengo "masculladas"...

A la forma aleatoria, que es la que tengo, pensé en barridos horizontales, verticales, oblícuos... todos desde cada costado, con la variante de progresión en zig-zag... espirales con sus variantes... y luego las persianas con sus variantes... en vez de ceñirnos a un solo efecto, porqué no nos proponemos juntar entre todos más de 100 efectos (con sus variantes).

Por cierto. Por mp se ha apuntado GastonManatico... aunque creo que es mejor presentarse en este mismo mensaje.

Ya quedan pocos días, suerte a todos los participantes

stock · #19 (**permalink**) 15/07/2010, 10:31

Ya quiero ver las propuestas de los participantes.... y ver como lo resolvieron :) personalmente he estado muy ocupado y ya no le he podido avanzar, solo tengo el efecto de las persianas, espero poder hacer algo más de aquí al lunes.

Saludos

pato12 · #20 (**permalink**) 17/07/2010, 22:43

vamos falta menos :P...

tengo una duda, el 19 hay que postear nuestro código aquí? o hay que mandártelo por mp o que? xD

caricatos · #21 (**permalink**) 19/07/2010, 10:29

Hola:

Ya estamos en el plazo de mostrar nuestros trabajos. Creo que podemos usar este mismo mensaje para mostrar nuestras soluciones (y evitar llenar el foro de mensajes importantes

)

A mi me falta un poco para presentar al menos un par de soluciones de mi mosaico, pero para ir ambientando y fuera de concurso ahí va una vieja página con unos pocos ejemplos que hice hace algunos años (supongo que alguno ya la habrá visto).

Imágenes (hay que mirar el Proyector de diapositivas

Saludos

abimaelrc · #22 (**permalink**) 19/07/2010, 10:35

Bueno cuando lo hayan publicado, les diré pronto cuál fue el más que vendí

pato12 · #23 (**permalink**) 19/07/2010, 13:06

Bueno, por fin

.. este es mi efecto, espero que les guste xD

abimaelrc · #24 (**permalink**) 19/07/2010, 14:17

A mi me gustó. Lo único que molesta ese parpadeo antes de que se genere la foto.

Carlangueitor · #25 (**permalink**) 19/07/2010, 22:33

Está bueno pato12, yo aún me ando peleando, yo creo que mañana ya lo termino.

Saludos

stock · #26 (**permalink**) 21/07/2010, 14:02

Ok, muy buenas las propuetas que han publicado, recién acabo de subir el sitio donde muestro mi propuesta.

Solo he tenido tiempo de hacer cinco transiciones diferentes, he documentado un poco las propiedades de configuración, en el sitio demo pueden verlas.

He probado el componente en Chrome, Firefox, Safari, IE7 e IE8, seguramente encontrarán algún bug por ahi, de ser así me avisan

http://www.crysfel.com/demos/slider/index.html

http://www.quizzpot.com/2010/07/slid...tencia-de-fdw/

Saludos

caricatos · #27 (**permalink**) 22/07/2010, 05:47

Hola:

También he implementado muy pocas variantes aquí: Reto FDW: Transición entre dos imágenes.

La primera de las fotos transita creando y borrando capas; solo está implementado el caso aleatorio... supongo que hubiera sido más fácil la forma secuencial...

La segunda opción es teniendo las capas creadas, mostrarlas u ocultarlas.

Supongo que con el debate tendremos pistas para mejorar nuestros códigos.

Sobre lo presentado, me han parecido algo complejos ¡Je, je!

yo he preferido simplificarlos...

Saludos

#28 (**permalink**) 22/07/2010, 08:44

caricatos, algo así pensaba implementar yo, con la diferencia de que yo tenía pensado hacerlo con una tabla posicionada directamente encima de la imagen en vez de con dives. Lo bueno de este enfoque es que, jugando con el número de filas y columnas, y con su transparencia, se puede hacer un efecto 'cortina' horizontal o vertical bastante decente.

Mi problema fue cómo ubicar la imagen de reemplazo. No quería tener que asignar a cada celda un trozo de fondo, y buscando una alternativa a eso (jugando con un fondo para la tabla y luego hacer aparecer / desaparecer celdas) fue que terminé sin tener nada hecho.

Como siempre, me gusta la simplicidad de tu código

Triby · #29 (**permalink**) 22/07/2010, 09:44

Excelentes trabajos!!!

Como soy muy novato en javascript me abstengo de opinar respecto al codigo.

stock · #30 (**permalink**) 22/07/2010, 11:16

En escencia yo también resolví los efectos al igual que caricatos además de crear un framework para agregar nuevos efectos de manera muy sencilla :)