Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lichking24/Thanos_Dust
Thanos dust effect like google search
https://github.com/lichking24/Thanos_Dust
thanos
Last synced: about 2 months ago
JSON representation
Thanos dust effect like google search
- Host: GitHub
- URL: https://github.com/lichking24/Thanos_Dust
- Owner: lichking24
- Created: 2019-04-29T11:43:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-04-29T13:15:29.000Z (over 5 years ago)
- Last Synced: 2024-07-13T18:49:07.822Z (2 months ago)
- Topics: thanos
- Language: JavaScript
- Size: 12.9 MB
- Stars: 81
- Watchers: 2
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Thanos Dust Effect
## Effects Demo
As Thanos making a snap with the Infinite Gauntlet, half the heros vanish to dust. As using the time stone, people come back.
![](public/img/demo.gif)
## Details
The procedures:
1. Click the Gauntlet button, and display animation to make a snap, and play audio file;
2. Select half heros by random, the random method is to resort members array;```
arr.sort(function() {
return 0.5 - Math.random();
});
```3. Make selected item to dust
- 3.1 use html2canvas library to convert dom to a canvas image
- 3.2 split the canvas images into many pieces by pixel, `function generateFrames()`
- 3.3 create a container which has the same size and position as the converted dom
- 3.4 appendChild to the container with the pieces
- 3.5 rotate random degrees and translate random pixel for each piece, which shows the dust animation
- 3.6 set converted dom item to be invisible and finish the SNAP action4. Reverse time to bring heros back by adjusting the visibility of converted dom items
## FAQ
**Why use a nodejs express server?**
A static html file will show errors with "Unable to get image data from canvas because the canvas has been tainted by cross-origin data", even if I set allowTaint to be true.