Efecto polaroid de forma fácil y rápida usando JavaScript
Via ajaxian descubro Instant.js 1.0 un script que nos permite agregar un efecto polaroid de forma fácil y rápida (una buena forma de evitar tener que editarlas). Funciona muy bien con todos los navegadores “importantes” - Mozilla Firefox 1.5+, ópera 9+ y safari. Pero en IE viejos no se vera ninguna modificación, lo que nos es problema ya que los usuarios no notaran ninguna diferencia, simplemente verán la imagen e forma normal.
Para comenzar a utilizarlo necesitamos descargar nuestra librería , subirla a nuestro hosting y llamarlo desde nuestro sitio, para ello copiaremos el siguiente código antes de nuestra etiqueta < /HEAD >
-
<script type="text/javascript" src="instant.js"></script>
Ahora a las imágenes que deseamos darle este efecto le agregamos la clase "instant". Ej:
-
<img class="instant" src="imagen.jpg" width="200" height="200" alt="">
-
class="instant" (llamamos a nuestro efecto)
-
src="imagen.jpg" (ruta de tu imagen)
-
width="400" (anchura de tu imagen)
-
height="400" (Altura de tu imagen)
Ejemplo:
Después de nuestra clase "instant" podemos agregar otros parámetros para personalizar o modificar el efecto, por ejemplo cambiar la inclinación, dar más opacidad en la sombra, etc.
Los parámetros que podemos agregar después de la clase instant son:
Dar opacidad a Sombra: El parametro “ishadow55” , nos sirve para modificar la opacidad de nuestra sombra, como vemos ishadow esta seguido por un numero este podrá varias entre 0 y 100 aunque si optamos por introducir únicamente la clase “instant” sin ningún parámetro, nuestra imagen tendrá una opacidad en su sombra de forma default de 33.
Ej codigo:
-
<img class="instant ishadow88" src="tufoto.jpg" width="350" height="350" alt="">
Ej Visual
Cambiar la Orientación de la imagen: luego de nuestra clase “instant” podremos agregar los siguientes parámetros que cambiaran la inclinación de la imagen, ellos son itiltright (derecha), itiltleft (izquierda), o itiltnone (ninguno)
Ej codigo:
-
<img class="instant itiltleft" src="tufoto.jpg" width="350" height="350" alt="">
Ej Visual
Cambiar el Color del marco de la imagen: Para cambiar el color del marco agregamos el parámetro “icolor000000”, donde “000000” corresponde a su color, en este caso 000000 = Negro, siempre el color deseado deberá ser expresado en hexadecimal.
Ej codigo:
-
<img class="instant icolor000000" src="tufoto.jpg" width="350" height="350" alt="">
Ej Visual
Tambien podremos agregar todos los parametros juntos:
EJ Codigo
-
<img class="instant ishadow80 itiltright icolor000000" src="imagen.jpg" width="200" height="200" alt="">
ej Visual
Descarga instant.js
Post original netzgesta
Via ajaxian
sunburn said,
Wrote on June 15, 2007 @ 19:41
Me encanto el Script, muy vistoso, creo que lo voy a implementar.
Enlaces Interesantes de la Semana said,
Wrote on June 16, 2007 @ 15:53
[...] Xyberneticos - Efecto polaroid de forma fácil y rápida usando JavaScript [...]
Edith Peña said,
Wrote on June 17, 2007 @ 17:23
Muy práctico, y muy sencillo, gracias. Seguro lo voy a implementar
Ubuntu Life » Blog Archive » Efecto Polaroid en nuestras imagenes mediante JavaScript said,
Wrote on June 17, 2007 @ 20:21
[...] en Anieto2K y Xyberneticos Tambien te puede [...]
....cosas del perro verde.... said,
Wrote on June 27, 2007 @ 11:09
Enmarcando fotos en el blog ......
Googleando me he encontrado con un pequeño javascript, que añadido al blog, permite insertar facilmente fotos enmarcadas (conocido como "efecto polaroid" por los photoshoperos...)Su instalación es fac......
Polaroid - Los mejores recursos PSD, Generadores, Actions, tutoriales, etc « Xyberneticos said,
Wrote on November 4, 2007 @ 2:07
[...] notaran ninguna diferencia, simplemente verán la imagen e forma normal.Descarga instant.js Manual en español.Para comenzar a utilizarlo necesitamos descargar nuestra librería , subirla a nuestro hosting y [...]
Polairod: Los mejores recursos PSD, Generadores, Actions, Tutoriales, etc. « Design Jasso said,
Wrote on November 20, 2007 @ 3:21
[...] notaran ninguna diferencia, simplemente verán la imagen e forma normal.Descarga instant.js Manual en español.Para comenzar a utilizarlo necesitamos descargar nuestra librería , subirla a nuestro hosting y [...]