Particle Effects for Buttons
Original Source: http://feedproxy.google.com/~r/tympanus/~3/FCCHhng3mvw/
Today we’d like to share a little effect library with you that can be used to create bursting particle effects. The idea is to desintegrate an element into particles and making it disappear (and vice versa). This effect looks really interesting on buttons, so we’ve created a little collection that showcases a bunch of different styles for the effect.
The inspiration for this idea came from Cuberto’s Hyperloop interface shot, Route Selection UI.
The demo is kindly sponsored by Segment: One API, 200+ tools, no more integrations.
If you would like to sponsor one of our demos, find out more here.
The animations are powered by anime.js. Here’s an example of how you can use it:
<!– Normal HTML element to disintegrate –>
// Initialize a new instance of Particles to disintegrate/integrate the button
var particles = new Particles(‘.button’);
// Disintegrate the button into particles
// particles.integrate(); // would do the opposite
The following options are available:
Padding for the generated canvas that will be positioned right behind the target element. A canvasPadding = 0 will cause the canvas and the target element to have the same dimensions.
Duration (ms) to perform the animations of target element and particles.
String or Function
Easing function to perform the animation of target element. It will be passed directly to anime.js.
Type of particle. Could be any of the following values: circle, rectangle, triangle
Style of particle. Could be any of the following values: fill, stroke.
Direction to start disintegrating the element. Could be any of the following values: left, right top, bottom. The opposite direction will be used to perform the integrate operation.
Float or Function
Random from 1 to 4
Size (px) for particles.
Float or Function
Random from -2 to 2
Pixels per frame that a particle will be moved. It could be a function to set it randomly per particle (as default value).
Color used to fill the particles.
A coefficient to calculate the amount of particles to animate. A particlesAmountCoefficient = 0 will result in 0 particles, while bigger values will increase the amount of particles.
A coefficient to calculate the oscilation of particles while animating. A oscilationCoefficient = 0 will result in no oscilation (straight movements), while bigger values will increase the oscilation, resulting in
a kind of randomness.
Execute a function at the beginning of the animation.
Execute a function at the end of the animation.
We hope you enjoy this and find it useful!
References and Credits
Particle Effects for Buttons was written by Luis Manuel and published on Codrops.
Leave a ReplyWant to join the discussion?
Feel free to contribute!