Particle effects using Javascript can add some life to websites

If you ever wanted to give your buttons some extra flair, you could simply use an effect library to store different types of particle effects. It's easy to generate a bursting effect by disintegrating an element into particles in anime.js. But there might be other elements you'd want to adjust as indicated by the following options:

Canvas padding Duration length Easing function Type changes Particle style Direction changes Particle size Oscillation coefficient Beginning animation Ending animation
People in the web design community have already made their own particle effects such as the one shown here. It is a parody of the phrase "I don't feel so good, Mr. Stark." Notice how the grey button and the quote dissolve simultaneously when clicked on. To be specific, it removes the quote by having the particles spread out from right to left. This is something that can be programmed using the particle effect library.

The only problem seems to lie in the demo page itself. People were not aware they had to scroll down for the "Drop" and "Back" buttons to actually work. Someone suggested that the page should have a "Begin" button that enables the page to automatically scroll down, displaying the rest of the effects in sequence. Although it runs perfectly on mobile, the desktop interface is poorly designed.

Of course, the particle effect has more applications beyond just buttons. However, it is still a work in progress; the button animations only serve to bring out the aesthetics of a web page. It may be better suited to a quick web game or a final touch on a movie promotional page.

Most people believe that particle effects have visual appeal but not many applications outside of the standard social media "Like" buttons. A dissolving submit or upload button would send the wrong message. If the developer wants to improve on the animations, they could add effects like exploding, boxing out, sliding, or fading buttons. The hard part is getting it to run across all mobile devices up to date. For more information click here https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/.