Demo
https://user-images.githubusercontent.com/1435457/169442632-62b8e967-6a4f-4c9f-a00f-c17cb436ad8f.mp4
Usage
-
Installation
npm install @9am/img-tissue
-
ESM
// HTML <img-tissue src="/url.png"></img-tissue>
import { register } from '@9am/img-tissue' register({})
or try it with skypack without installation
import { register } from 'https://cdn.skypack.dev/@9am/img-tissue' register({})
-
Zoom
// js const tissue = document.querySelector('img-tissue') tissue.zoomIn({ clientX: 0, clientY: 0, duration: 300 }) tissue.zoomOut({ clientX: 0, clientY: 0, duration: 300 })
API
-
< img-tissue > attributes
Name Type Default Description src
{String} Required The image URL title
{String} ''
For screen readers column
{Number} 4
Split area into {column} vertically row
{Number} 4
Split area into {row} horizontally -
< img-tissue > methods
Name Params Type Default Description zoomIn({ clientX, clientY, duration })
{Function} ZoomIn the image to target position zoomOut({ clientX, clientY, duration })
{Function} ZoomOut the image to clientX
{Number} Required X position on the client viewport clientY
{Number} Required Y position on the client viewport duration
{Number} Required Duration of the animation(ms) -
register options
Name Type Default Description tagName
{String} img-tissue
Change tag name of the web component
Development
-
Install dependencies
npm install
-
Start dev server
npm run dev
-
Put images under
./demo/img
, replace image URL inindex.html
-
Open
localhost:3000
in the browser
Testing
TBD