Smooth Interactive Inner Zoom In Vanilla JavaScript – focus.js

focus.js is an ES6/Vanilla JavaScript plugin to provide smooth interactive image inner zoom functionality that reacts to mouse movement.

Works both with browser and Node.js.

How to use it:

Install and import the ‘focus.js’ package.

import FocusImage from './src/focus'

Create a container element to hold your image.

<div id="demo"></div>

Create a new FocusImage instance to activate the image zoom.

let config = {
    imageSrc: 'bg.jpg',
    parentElement: CONTAINER-ELEMENT,
};
new FocusImage(config);

All default options to customize the 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
    
};

Changelog:

10/28/2018

• Updated build, fixed src library code that was overwritten with dist