ZooMove: jQuery Plugin para acercar imágenes al pasar el mouse

Si alguna vez ha navegado por un sitio de comercio electrónico, es probable que haya visto el efecto de zoom de la imagen . Colocas una foto del producto y esa parte de la imagen se amplía para obtener una vista más clara .

El plugin ZooMove es una excelente manera de replicar este efecto en su sitio. Está alimentado por jQuery, por lo que puedes ponerlo en funcionamiento rápidamente sin mucho código.

ZooMove es completamente gratuito y de código abierto, disponible en GitHub para cualquier desarrollador curioso. Puede instalarse a través de npm, Bower, Yarn o descargarse directamente desde CDNJS .

Para configurar una imagen de ZooMove, necesitará tres archivos específicos en el encabezado de su página:

1. jQuery
2. ZooMove CSS
3. ZooMove JS

Ambos archivos ZooMove se pueden minimizar si desea cargas de página más rápidas. También puede combinar el archivo CSS en su hoja de estilo principal si es más fácil.

Toda la magia real ocurre en el HTML donde puedes establecer data-* attributes de data-* attributes HTML5 data-* attributes para los diferentes efectos.

Esto le permite crear su propio efecto de zoom personalizado basado en cuatro parámetros diferentes:

1. data-zoo-scale : define el tamaño total del zoom al desplazarse (ej. 2.0 para 200%)
2. data-zoo-move : define si la imagen se mueve junto con el cursor
3. data-zoo-over : define la imagen ampliada aparece sobre el original
4. data-zoo-cursor - define el punto del cursor

Un quinto parámetro final le permite definir cuál debe ser la nueva URL de la imagen (si es necesario).

Puede usar ZooMove en todos los navegadores principales, incluido IE9 +. Este plugin es ampliamente compatible y ofrece una gran experiencia de usuario.

Si está buscando una biblioteca simple para desplazarse con el zoom, ZooMove es una excelente opción. Es lo suficientemente liviano para ejecutarse en cualquier sitio web y está impulsado por jQuery, por lo que no necesitará escribir tanto código para hacerlo funcionar.

Visite la página principal para verla en acción y consulte la documentación en GitHub para obtener más información.