https://github.com/z3ut/mouse-wheel-zoom

Zoom html elements with mouse wheel
https://github.com/z3ut/mouse-wheel-zoom

html mouse wheel zoom

Last synced: 2 months ago
JSON representation

Zoom html elements with mouse wheel

• Host: GitHub
• URL: https://github.com/z3ut/mouse-wheel-zoom
• Owner: z3ut
• Created: 2018-03-10T16:22:04.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2020-03-01T13:59:30.000Z (almost 5 years ago)
• Last Synced: 2024-10-13T13:13:35.112Z (3 months ago)
• Topics: html, mouse, wheel, zoom
• Language: JavaScript
• Size: 297 KB
• Stars: 8
• Watchers: 2
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Mouse wheel zoom

Zoom html elements with mouse wheel.

[Live demo](https://z3ut.github.io/mouse-wheel-zoom/)

## Installation

```

npm i mouse-wheel-zoom

```

## Usage

```

import { mouseWheelZoom } from 'mouse-wheel-zoom';

const wz = mouseWheelZoom({

  element: document.querySelector('[data-wheel-zoom]'),

  zoomStep: .25  

});

// reset zoom

wz.reset();

```

## Description

Ispired by [Jack Moore wheelzoom](https://github.com/jackmoore/wheelzoom) This package allows to view image and copy image url after right-click on image.

For given html element mouse-wheel-zoom will replace it with inline-block div wrapper. Wrapper will have two elements - original element with absolute positioning and cloned element with zero opacity. Wrapper size will be determined by zero opacity element, original element with absolute positioning can be moved\resized with mouse.

For element

```



```

Mouse-wheel-zoom will replace it with

```



  

  



```


_Warning!_ Do not use for zooming html elements with id. After cloning page will have 2 elements with same id.

## Documentation

### Config object

Property | Description | Default

---|---|---

element | DOM element to zoom | none

zoomStep | Size change for each step, relative to 1 = initial size | .1

### Returned object

Method | Description

---|---

reset | Rest current zoom level and position

setSrc | Change image src

setSrcAndReset | Change image src and reset

dispose | Remove zooming element from page

## Development

Project require globally installed [parcel](https://parceljs.org/getting_started.html). Run ```npm run start``` and see demo page with live reload on [http://localhost:1234](http://localhost:1234)