Smooth Interactive Inner Zoom In Vanilla JavaScript – focus.js

Category: Image , Javascript , Zoom | October 28, 2018
Author: Spiderpig86
Views Total: 1,673
Official Page: Go to website
Last Update: October 28, 2018
License: MIT

Preview:

Smooth Interactive Inner Zoom In Vanilla JavaScript – focus.js

Description:

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

You Might Be Interested In:


Leave a Reply