To see her: Experimentos en JavaScript

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.

0 comentarios:

Publicar un comentario