Smooth Interactive Inner Zoom In Vanilla JavaScript – focus.js

Category: Image , Javascript , Zoom | October 28, 2018
Views Total:3,032 views
Official Page:Go to website
Last Update:October 28, 2018


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



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

You Might Be Interested In:

Leave a Reply