https://github.com/knowankit/thanos-snap
A fun package for Marvel Thanos which wipes the image with one snap 😜
https://github.com/knowankit/thanos-snap
avengers-endgame marvel snap thanos
Last synced: 6 months ago
JSON representation
A fun package for Marvel Thanos which wipes the image with one snap 😜
- Host: GitHub
- URL: https://github.com/knowankit/thanos-snap
- Owner: knowankit
- License: mit
- Created: 2019-05-02T15:20:52.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-27T17:16:23.000Z (over 5 years ago)
- Last Synced: 2024-04-25T06:43:24.969Z (over 1 year ago)
- Topics: avengers-endgame, marvel, snap, thanos
- Language: HTML
- Homepage:
- Size: 5.62 MB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# thanos-snap by [Ankit](https://knowankit.com)
A custom web component to make your html element disappear with one snap of thanos. But unlike thanos power, this component does not bring back the dead. Use it wisely. :)
## Installation
### Install via npm:
`$ npm install thanos-end-game`
## Usage
To use thanos-snap in your website, just add the `thanos.min.js` into your document's ``. That's it! You've thanos power now. Please use it wisely.
Add the custom component tag, give the `id` of the `object` and of the `weapon`.
For example:
` `
In the above component `iron-man` and `thumb` are id given to the `div` and the `button` respectively.
```html
Snap
```
### Adding js file to your page
```html
```
or use a CDN version by [jsDelivr](https://cdn.jsdelivr.net/npm/thanos-snap/thanos.min.js)
**You need to add the css as well to make pixel effect work properly**
```css
.dust {
position: absolute;
}
* {
margin: 0px;
overflow-x: hidden;
}
.iron-man {
display: inline-block;
}
You can rename the `.iron man` class with the one which you gave in the component.
```
## Dependencies
`html2canvas`
`chance`
`jQuery`
`jQueryUi`
Add the scripts in sequential manner as per the above list.
```html
```
Add the scripts present in scripts folder after doing npm install
```html
```
## Demo
[Click here](https://thanos.knowankit.com/)