Zoom interno interactivo suave en Vanilla JavaScript-Focus. js
| Autor: | Spiderpig86 |
|---|---|
| Views Total: | 1,261 |
| Sitio oficial: | Ir a la web |
| Actualizado: | October 28, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Focus. js es un plugin de JavaScript ES6/Vanilla para proporcionar una funcionalidad de zoom interna de imagen fluida que reacciona al movimiento del ratón.
Funciona tanto con el explorador como con node. js.
Funcionamiento
Instale e importe el paquete ' Focus. js '.
import FocusImage from './src/focus'
Cree un elemento contenedor para mantener la imagen.
<div id="demo"></div>
Cree una nueva instancia de FocusImage para activar el zoom de la imagen.
let config = {
imageSrc: 'bg.jpg',
parentElement: CONTAINER-ELEMENT,
};
new FocusImage(config); Todas las opciones predeterminadas para personalizar el Focus. js.
let config = {
// zoom factor
zoomFactor: '250%',
// more smooth
smoother: true,
// width/height of parent container
width: '100%',
height: '66.7%',
// custom cursor when hovering over
cursor: '',
// zoom on scroll
zoomOnScroll: true
}; Registro de cambios
10/28/2018
- Se actualizó el código de la biblioteca src fija que se sobrescribió con el Dist
