1.0.0 • Published 2 years ago
@9am/img-tissue v1.0.0
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
License
1.0.0
2 years ago