thanos-end-game
v1.0.0
Published
A custom web component to make your html element disappear with one snap of thanos. But unlike thanos power, this componentdoes not bring back the dead. Use it wisely. :)
Downloads
13
Maintainers
Readme
thanos-snap
A custom web component to make your html element disappear with one snap of thanos. But unlike thanos power, this componentdoes not bring back the dead. Use it wisely. :)
Installation
Install via npm:
$ npm install thanos-snap
Usage
To use thanos-snap in your website, just add the thanos.min.js
into your document's <head>
. 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:
<thanos-snap object='iron-man' weapon='thumb'> </thanos-snap>
In the above component iron-man
and thumb
are id given to the div
and the button
respectively.
<div id='iron-man' class="iron-man mt-4">
<img src="iron-man.png" />
</div>
<button id='thumb'>Snap</button>
Adding js file to your page
<script src="thanos.min.js"></script>
or use a CDN version by jsDelivr
You need to add the css as well to make pixel effect work properly
.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.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Add the scripts present in scripts folder after doing npm install
<script type="text/javascript" src="scripts/html2canvas.js"></script>
<script type="text/javascript" src="scripts/chance.js"></script>