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.
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:
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.
Experimento funcionando en mi blog:
Avibert
Gracias JMiur... :)
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
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.
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
Impresionante!!!
Siii, ¿donde está el script?.
Uau!!! Que interessante!!! :D
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
Ahora si, bordes eliminados. No me di cuenta de tocar el CSS del efecto...
Gracias ;)
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
Jmiur se podría hacer choque de planetas! me encantó :)
Manfenix: Imagino que si, a simple vista, no veo nada incompatible pero, no lo he intentado.
Graciela: Es bello ¿verdad? :D
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. :)
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 :)
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
No, no sé porque ocurre eso. SOn experiementos y es probable que algunos de ellos sólo funcionen bajo ciertas condiciones.
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
Cosas impresionantes como siempre master, increible su pagina, saludos
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.
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)
Luz: Tendría que ver tu ejemplo para verificar si ay algún error.
Argifauve: ¡Era hora!!! :D
:)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?)
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?
Luz: lo tenía programado; ahora si :D
: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!
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.
Hola, también tengo el mismo problema que LuzdeLuna.
La imagen no se completa.
Industrial Night
:S
No puedo decirte el motivo ya que lo has colocado en un blog privado.
Perdón, olvidé habilitarlo: Blog Mínimo
Manfenix:
No veo que en ese blog esté colcoado el script ni el CSS correspondiente.
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.
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.
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
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>
Muchas gracias, otra vez
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
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 ...