Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

The goal of simpleTones.js is to provide every JavaScript developer with a lightweight solution for creating custom sounds in their web applications. This documentation has been written in hopes that the least experienced developer can read, understand and go on to do great things. You can check out several examples at this link:

Stars: ✭ 45 (-95.99%)

Mutual labels: javascript-library

Fobo

FoBo - A Modular Front-End Toolkit module for Lift

Stars: ✭ 59 (-94.74%)

Mutual labels: javascript-library

Diver.js

Dives deep into the dom and dumps it in the object literal notation.

Stars: ✭ 57 (-94.92%)

Mutual labels: javascript-library

Ripple Without Js

Create Material Design ripple effect in your HTML without using a single line of JS.

Stars: ✭ 53 (-95.28%)

Mutual labels: button

Chroma.js

JavaScript library for all kinds of color manipulations

Stars: ✭ 8,364 (+645.45%)

Mutual labels: javascript-library

Opencrypto

OpenCrypto is a lightweight JavaScript library built on top of WebCryptography API

Stars: ✭ 54 (-95.19%)

Mutual labels: javascript-library

Sizeslidebutton

A fun Swift UIControl for picking a size

Stars: ✭ 46 (-95.9%)

Mutual labels: button

Evangelist

🌟 Library of helpers that are useful for functional programming

Stars: ✭ 58 (-94.83%)

Mutual labels: javascript-library

Angular Tree Component

A simple yet powerful tree component for Angular (>=2)

Stars: ✭ 1,031 (-8.11%)

Mutual labels: javascript-library

Progressbutton

Custom ProgressButton

Stars: ✭ 52 (-95.37%)

Mutual labels: button

Messageviewjs

Talking Scene JavaScript Library

Stars: ✭ 56 (-95.01%)

Mutual labels: javascript-library

Tvosmorebutton

📺 tvOS '... More' Button

Stars: ✭ 51 (-95.45%)

Mutual labels: button

Drafter.js

API Blueprint parser in JS

Stars: ✭ 50 (-95.54%)

Mutual labels: javascript-library

View All Similar Projects ➔

Particle Effects for Buttons

Bursting particles effects for buttons. By Luis Manuel.

Article on Codrops

Demo

Credits

anime.js

Basic usage

The Particles library depends on anime.js to perform animations, so you need to include it before Particles. Also, please make sure to include all the scripts at the end of the body element.

Then you can start disintegrating/integrating things like:

<!-- Normal HTML element to disintegrate -->
<button class="button">Button</button>

<script src="anime.min.js"></script>
<script src="dist/particles.min.js"></script>
<script>
    // Initialize a new instance of Particles to disintegrate/integrate the button
    var particles = new Particles('.button');

    // Disintegrate the button into particles
    particles.disintegrate();

    // particles.integrate(); // would do the opposite
</script>

Options

For customization, you can pass options to Particles constructor. That options will override the default values, and will be used for any future operation (disintegrate or integrate). You can also override the options for a specific operation. Here is the complete list of options available:

Name	Type	Default	Description
`canvasPadding`	`Integer`	`150`	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`	`Integer`	`1000`	Duration (`ms`) to perform the animations of target element and particles.
`easing`	`String` or `Function`	`easeInOutCubic`	Easing function to perform the animation of target element. It will be passed directly to `anime.js`.
`type`	`String`	`circle`	Type of particle. Could be any of the following values: `circle`, `rectangle`, `triangle`
`style`	`String`	`fill`	Style of particle. Could be any of the following values: `fill`, `stroke`.
`direction`	`String`	`left`	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.
`size`	`Float` or `Function`	Random from `1` to `4`	Size (`px`) for particles.
`speed`	`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`	`String`	Target's `background-color`	Color used to fill the particles.
`particlesAmountCoefficient`	`Float`	`3`	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.
`oscilationCoefficient`	`Float`	`20`	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.
`begin`	`Function`	`undefined`	Execute a function at the beginning of the animation.
`complete`	`Function`	`undefined`	Execute a function at the end of the animation.

Wrapper for popular Javascript frameworks

Thanks to amazing contributors, the library can be used easily in the following popular Javascript frameworks:

React: react-particle-effect-button, by Travis Fischer.
Angular: angular-particle-effect-button, by Daniel Popa.
Vue: vue-particle-effect-buttons, by Vincent Guo.

License

This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.

Misc

Follow Luis: Twitter, GitHub

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 1,122

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (2) 🔗