https://github.com/9am/img-tissue

A web component animates an image with a minimization effect. 🕸
https://github.com/9am/img-tissue

animation canvas webcomponent

Last synced: about 1 month ago
JSON representation

A web component animates an image with a minimization effect. 🕸

• Host: GitHub
• URL: https://github.com/9am/img-tissue
• Owner: 9am
• License: mit
• Created: 2022-05-20T03:18:38.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-05-20T03:34:16.000Z (over 2 years ago)
• Last Synced: 2024-10-01T14:56:05.031Z (about 2 months ago)
• Topics: animation, canvas, webcomponent
• Language: JavaScript
• Homepage:
• Size: 7.81 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


	

	
<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

1. Installation

	```

	npm install @9am/img-tissue

	```

2. ESM

	```html

	// HTML

	

	```

	```js

	import { register } from '@9am/img-tissue'

	register({})

	```

	or try it with skypack without installation

	```js

	import { register } from 'https://cdn.skypack.dev/@9am/img-tissue'

	register({})

	```

3. Zoom

	```javascript

	// js

	const tissue = document.querySelector('img-tissue')

	tissue.zoomIn({ clientX: 0, clientY: 0, duration: 300 })

	tissue.zoomOut({ clientX: 0, clientY: 0, duration: 300 })

	```

## API

1. < 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|

2. < 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)|

3. register options

	|Name|Type|Default|Description|

	|:--:|:--:|:-----:|:----------|

	|`tagName`|{String}|`img-tissue`|Change tag name of the web component|

## Development

1. Install dependencies

	`npm install`

4. Start dev server

	`npm run dev`

5. Put images under `./demo/img`, replace image URL in `index.html`

6. Open `localhost:3000` in the browser

## Testing

TBD

## License

[MIT](LICENSE)