Dojo Zoomer es otro script que se suma a la larga lista de recursos que nos permiten implementar un sistema de zoom o acercamiento sobre imágenes.
La propuesta es simple, mostrar una imagen que al poner el puntero de mouse por encima, muestra un cuadrado, el contenido que queda comprendido dentro de este, se muestra amplificado en una nueva imagen. El cuadrado que muestra la porción a ampliar, se puede arrastrar sobre la imagen para mostrar el acercamiento de la porción de dicha imagen .
Este recurso es gratis y sólo hay que enlazar el archivo JS, inicializar el script y definir los estilos en una CSS.
Dojo Zoomer:
Desarrollo, Diseño, Recursos
acercamiento, Dojo, efecto, imagenes, script, zoom, Zoomer
Efecto PagePeel
Hace ya algunos años que comenzaron a aparecer en algunos sitios, anuncios especiales o publicidades por medio de un recurso visual muy curioso. Se trataba de mostrar en algunas de las esquinas de la página, generalmente en la esquina superior derecha, una punta de hoja doblada, que al pasar el ratón sobre esta, se desplegaba hacia abajo mostrando el mensaje o algún cartel (banner) publicitario. El problema con todas estas implementaciones, era que por lo que había visto, todas eran en Flash.
PagePeel Effect es un plugin jQuery con el podemos crear el efecto de punta de hoja levantada que se activa al pasar el puntero del ratón dejando ver el contenido que hay debajo. Para ver de que se trata, basta con visitar el demo.
Estuve probando el demo y la verdad me parece muy bueno, funciona bien y no le envidia nada a las soluciones que conocía que estaban implementadas en Flash.
Usarlo es muy sencillo:
- Hay que enlazar el archivo jQuery.js y jQuery.pagePeel.js.
- A continuación, hay que colocar un pequeño script de inicialización.
- Y agregar <div id=“pagePeel”></div> debajo de <body>.
PagePeel Effect, simple, elegante y sobre todo llamativo, otro ejemplo de la potencia de jQuery.
PagePeel Effect
Desarrollo, Diseño
efecto, Effect, extension, flash, Javascript, jQuery, PagePell, plugin, recurso, script
Easy Slider
Easy Image o Content Slider es un plugin jQuery para implementar una galería de imágenes simple, pero con un elegante efecto de transición.
Con este recurso se logra mostrar una imagen y cuando se presiona el botón siguiente, se produce una transición hacia la imagen siguiente y que puede configurarse para que se produzca horizontalmente o verticalmente.
Posee opciones para configurar: el sentido de rotación, la velocidad y texto que mostrará los botones de comando.
Como su nombre lo dice, es simple. En el sitio hay mucha documentación que no sólo explica como implementarlo, sino también como funciona.
Easy Image o Content Slider, otro excelente recurso para usar en nuestros desarrollos.
Recursos
efecto, extension, galería, imagenes, jQuery, mostrar, plugin, transición
A la enorme riqueza de recursos que podemos usar en la interfaz de nuestros desarrollos y así para potenciar y enriquecer la experiencia del usuario, hay que tomar en cuenta a OpenZoom
OpenZoom es un framework open source para crear interfaces de usuario con efecto zoom o acercamiento. Este está construido en la cima de Adobe Flash Platform y provee componentes personalizables que pueden ser usados incluso en Flash o Flex.
Características de OpeeZoom:
- Soporta modo a pantalla completa.
- Permite la navegación por ratón (mouse) incluída la rueda de desplazamiento.
- Soporta la navegación por teclado.
- Permite menús contextuales.
- 100% Open Source.
- Y algunas otras características más.
Sigue…
Desarrollo, Diseño
acercamiento, Adobe, Desarrollo, efecto, flash, flex, framework, interfaz, open, OpenZoom, source, zoom
La verdad es que no se me ocurría usar en un proyecto alguna librería que me permitiera implementar algo similar al efecto Lightbox. Este ha sido usado hasta el hartazgo (y sigue siendo usado ampliamente) y su funcionalidad es imitada por múltiples librerías que ofrecen alguna variación de este efecto.
Por eso una interesante alternativa, simple y elegante es Zoomy.js. Se trata de una clase Prototype que permite crear una galería de imágenes. Esta se puede usar en ampliaciones de imágenes simples con varias opciones de personalización o como un popup y/o como unas ventanas superpuestas que se pueden arrastrar.
Zoomy.js es una opción que se caracteriza por:
- Permitir hacer clic sobre una imagen miniatura para mostrarla ampliada, como esta es precargada el tiempo de reacción es rápido.
- Opcionalmente puede mostrar título y un botón de cierre.
- Depende de las bibliotecas Javascript Prototype y Scriptaculous.
- Entre las opciones de personalización figuran: Sigue…
Desarrollo, Diseño
agrandar, arrastrar, Desarrollo, Diseño, efecto, galería, imagen, Javascript, prototype, ventana, zoom
jParallax es un script para crear imágenes con un efecto dinámico y de profundidad.
El resultado final es un efecto muy vistoso y atractivo que se logra separando en capas los distintos elementos que componen la imagen que luego el script se encargará de superponer. Al desplazar el puntero del mouse sobre esta, la capas se van desplazando creando profundidad.
Principales características:
- utiliza jQquery;
- es fácil de implementar;
- hace uso del plugin jQuery iFixPng para visualizar correctamente las imágenes PNG en IE 6;
- y posee muchas opciones de configuración. Sigue…
Desarrollo, Diseño
3d, crear, Desarrollo, Diseño, efecto, imagenes, jParallax, jQuery, profuncidad, scipt