@9am/img-tissue

<img-tissue>

A web component animates an image with a minimization effect.

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 in index.html

• Open localhost:3000 in the browser

Testing

TBD

License

MIT