JMiur [E]

Este es otro experimento de dhteumeuleu llamado to see her donde con sólo unas pocas líneas de JavaScript se logra un efecto increible.

Para colocarlo en un post de Blogger no hay muchas problemas. Primero, colocamos el CSS, luego el script y por último el código HTML.


<style type='text/css'>
#screen {
background: transparent;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
#SP {
left: 50%;
position: absolute;
top: 50%;
}
#screen span {
left: -1000px;
overflow: hidden;
position: absolute;
}
#screen img {
position: absolute;
-ms-interpolation-mode:nearest-neighbor;
}
</style>

<script type="text/javascript" src="URL_script"></script>

<div style="height: VALORpx; position: relative;">
<div id="screen">
<div id="SP"></div>
</div>
<img id="IMG" src="URL_imagen" style="visibility:hidden">
</div>
Ahí sólo cambiamos los datos indicados en color. La altura del DIV externo debería adaptarse al tamaño de la imagen; será la altura del rectángulo donde se mostrará el efecto y la lógica es que sea superior a la altura de esta.

36 comentarios:

Lagarto  

Imprecionante y con tan poco codigo, felicidades maestro me encanta cuando haces este tipo de cosas con las que me quedo cual niño viendo una mariposa salir del capullo.

Responder
Manfenix  

Experimento funcionando en mi blog:

Avibert

Gracias JMiur... :)

Responder
Gem@  

Pues no, no coincidimos :D el que yo decía era otro a ver si me da tiempo y le doy salida.
Creo que nos enviciamos con esa página jajajajaja

Responder
Dña. Urraca  

A mi me falta algo o no lo estoy entendiendo, dice URL_script, pero ¿donde está el script que tengo que alojar?. El efecto es muy original.

Responder
Manfenix  

Una consulta JMiur: con una primera imagen, al incluir en el style, la instrucción "border: 0px none;", elimine el borde de la imagen. Pero al cambiar de imagen y aplicar lo mismo al borde de la misma, quedò a la vista un borde superior y lateral izquierdo, como lo puedes apreciar en el post.
El código de referencia es:

<div style="height: VALORpx; position: relative;">
<div id="screen">
<div id="SP"></div>
</div>
<img id="IMG" src="URL_imagen" style="border: 0px none; visibility:hidden">
</div>

Cómo puedo solucionar el problema?
Gracias

Responder
La hormiguita  

Impresionante!!!

Responder
Deybi  

Siii, ¿donde está el script?.

Responder
MamaNunes  

Uau!!! Que interessante!!! :D

Responder
JMiur  

Lagarto: Sí, eso impresiona :)

Manfenix: eso ocurre porque todas las imágenes de tu blog que se agregan a una entrada, tienen un borde y un padding:
.post img {
border:1px solid #446688;
padding:4px;
}

deberías agregar algo así para quitarlo en el efecto:
#screen img {border:none;padding:0px;}

Gem@: Jajajaja, menos mal :D Oh si, es genial ese sitio.

Dña. Urraca, Deybi: el script está en la página del autor.

La hormiguita, MamaNunes: Exacto, es impresionante :D

Responder
Manfenix  

Ahora si, bordes eliminados. No me di cuenta de tocar el CSS del efecto...
Gracias ;)

Responder
Manfenix  

Una consulta. He intentado aplicar el efecto:

Not in Vein

en un blog de prueba, pero sin éxito. Será posible adaptarlo para poder correrlo en un blog? :S

El efecto es espectacular

Responder
Graciela  

Jmiur se podría hacer choque de planetas! me encantó :)

Responder
JMiur  

Manfenix: Imagino que si, a simple vista, no veo nada incompatible pero, no lo he intentado.

Graciela: Es bello ¿verdad? :D

Responder
Manfenix  

Hola JMiur, quisiera tu ayuda para terminar de adaptar el siguiente efecto en un post:

Before my eyes

Lo apliqué a un blog de prueba: Aviber de Luxe.

El problema que hasta el momento no puedo solucionar es que el post queda cortado en el pié del mismo.

Además quería saber qué parte del script se debe modificar para hacer que el agrandamiento de la imagen (al cliquearla), sea menor.

En lo que puedas ayudarme, gracias. :)

Responder
JMiur  

No veo que el post esté cortado. No sé que es lo que notas de malo.

En cuanto a como modificar el script: Ni idea :)

Responder
Manfenix  

Agregué otro post para remarcar el problema. En éste se ve el "Publicado por...." y la hora.
El post "Rueda de Imágenes" muestra solo el titulo. Y la barra de desplazamiento vertical para el blog no aparece.
Imagino que en el script del efecto está el problema, no en el CSS del mismo.
Alguna idea? :S

Aviber de Luxe

Responder
JMiur  

No, no sé porque ocurre eso. SOn experiementos y es probable que algunos de ellos sólo funcionen bajo ciertas condiciones.

Responder
Manfenix  

JMiur, resolví el problema. Después de unas cuantas horas.... :S
Qué satsfacción lograrlo luego de tirar la toalla varias veces... :D

AvibertdeLuxe

Andaba buscando un efecto de este tipo para el blog.
Saludos

Responder
PeterX  

Cosas impresionantes como siempre master, increible su pagina, saludos

Responder
LuzdeLuna  

Hola JMiur! como siempre ... magníficos post!!
Quise colocar este efecto en mi blog, pero algo hago mal pòrque no he podido. Puse el script en la plantilla luego del css y no funca,lo puse en un contenedor (asi como tengo el lightwindows) y no funca, lo puse en fileden haciendo la llamada luego del css y no funca!! lo unico que dio resultado es al final, antes del /body, pero me anula los efectos glossy e instant, que los uso mucho.
El que coloco en el contenedor o en fileden, tendrían que funcionar bien,eso creo,alguna idea de lo que estoy haciendo mal??
Gracias JMiur! un abrazo.

Responder
Argifauve  

Salió de una vez... :D

a ver que sale luego de "esa" lucha :)

LuzdeLuna: primero el Css; Script y luego el HTML. En fileden lo tengo alojado y funciona. (toodo enb linea..sin saltos)

Responder
JMiur  

Luz: Tendría que ver tu ejemplo para verificar si ay algún error.

Argifauve: ¡Era hora!!! :D

Responder
LuzdeLuna  

:)Gracias por contestarme, JMiur!
pero... pues no!:$,puse css y llamada en plantilla antes de /head, y HTML en una linea en un post y nada.
Bue, lo deje asi por si queres fijarte, solo elimine el post.
Me cache! :(( es un precioso efecto para imagenes.
Bnas noches JMiur!

PD: Gracias Argifauve, (pero en tu blog no esta?)

Responder
JMiur  

El script parece estar bien y el preocedimiento es el correcto. Debería ver el ejemplo para tratar de descubrir el problema ¿Has probado en un blog de pruebas?

Responder
Argifauve  

Luz: lo tenía programado; ahora si :D

Responder
LuzdeLuna  

:D yo de nuevo! Este efecto para las imágenes nunca me salió en el blog principal. Ahora hice lo del blog minimo y ahí puse el efecto y luego con el Iframe en el principal.(como verás me quedo la sangre en el ojo con este efecto :D jeje)
En el mínimo funciona bien pero... en un post del principal la imágen se dispersa pero no se arma totalmente de nuevo, será por las medidas?
Lo dejo en el primer post por si deseas verlo.
Gracias!! esto del mínimo está genial!

Responder
JMiur  

Pués si. En el demo se ve perfecto y en el post se va ce rango, como si "faltase espacio". No veo errores, salvo, tal vez que el bodu del demo tiene un padding de 5px pero eso no es fundamental.

Podría ser alguna incompatibilidad con otro script. No creo pero es tan compleja de entender que no se me ocurren muchas alternativas. Tal vez, eso que disces de aumentar los tamaños o agregarles la propiedad width.

Responder
Manfenix  

Hola, también tengo el mismo problema que LuzdeLuna.
La imagen no se completa.
Industrial Night
:S

Responder
JMiur  

No puedo decirte el motivo ya que lo has colocado en un blog privado.

Responder
Manfenix  

Perdón, olvidé habilitarlo: Blog Mínimo

Responder
JMiur  

Manfenix:
No veo que en ese blog esté colcoado el script ni el CSS correspondiente.

Responder
Manfenix  

El enlace correspondiente a esa entrada es: Noche Industrial.
Esta entrada la tengo en un iframe en el blog Avibert de Luxe:
Industrial Night.
En esta última entrada se presenta el problema, la imagen después de dispersarse no se vuelver a conformar.

Responder
JMiur  

Pues no sabria decirte. Es probable que sea un problema de tamaños. Deberías adaptar el ejemplo para que el tamaño sea el mismo que en tu blog, que no supere los 690 pixeles de ancho que es el espacio máximo del que dispones.

Responder
Flenning  

Hoa, JMiur
Muy interesante el efecto, tu propuesta y el sitio de dhteumeuleu.

Logré hacerlo funcionar de la manera que propone el ejemplo pero como mi hosting es peor que pesimo queria saber si ¿Hay forma de que funcione alojando el script en el blog?

muchas gracias

Responder
JMiur  

Flenning:

Si quieres, puedes usar DropBox para alojar el archivo; sino, no creo que haya problemas en agregarlo en el mismo blog, colocándolo con CDATA:

<script type='text/javascript'>
//<![CDATA[
........... pegar el contenido del script
//]]>
</script>

Pero, deberías condicionar su ejecución de algún modo para evitar que funcione en todas las páginas o bien modificar levemente el script. Allí, al final dice algo así como:

onload = function(){
..............
}

y creo que podrías cambairlo así:

function ejecutar (){
..............
}

luego, en el post donde lo usarás, pones esto:

<script> window.onload=ejecutar; </script>

Responder
Flenning  

Muchas gracias, otra vez

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR