
Cuando se trata de movimiento y animaciones, probablemente no hay nada que me guste más que las partículas. Es por eso que cada vez que exploro nuevas tecnologías siempre termino creando demos con tantas partículas como puedo.
En esta publicación, haremos aún más magia de partículas usando la API de animaciones web para crear un efecto de fuegos artificiales al hacer clic en un botón.
Soporte del navegador
En el momento en que escribo este artículo, todos los navegadores principales, con la excepción de Safari e Internet Explorer, admiten al menos parcialmente la API de animaciones web. La compatibilidad con Safari se puede habilitar en el menú del desarrollador “Funciones experimentales”.
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.
Escritorio
Cromo | Firefox | ES DECIR | Borde | Safari |
---|---|---|---|---|
84 | 75 | No | 84 | 13,1 |
Móvil / Tableta
Android Chrome | Android Firefox | Androide | Safari de iOS |
---|---|---|---|
96 | 94 | 96 | 13,4-13,7 |
Si está interesado en reproducir la animación del corazón de Twitter, también puede echar un vistazo a este interesante artículo de Ana Tudor que es otro gran ejemplo de explosión de partículas en un botón.
Configuración HTML
No necesitaremos mucho HTML para esta demostración. Usaremos un <button>
elemento, pero podría ser otro tipo de elemento de etiqueta. Incluso podríamos escuchar cualquier clic en la página para hacer estallar partículas desde cualquier lugar si realmente quisiéramos.
<button id="button">Click on me</button>
Configuración de CSS
Dado que cada partícula tiene algunas propiedades CSS en común, podemos establecerlas en el CSS global de la página. Como puede crear elementos de etiqueta personalizados en HTML, usaré un <particle>
nombre de etiqueta para evitar el uso de etiquetas semánticas. Pero la verdad es que podrías animar <p>
, <i>
o cualquier etiqueta de su elección.
particle {
border-radius: 50%;
left: 0;
pointer-events: none;
position: fixed;
top: 0;
}
Un par de cosas a tener en cuenta aquí:
- Las partículas no deberían interactuar con el diseño de nuestra página, por lo que estamos configurando un
fixed
posición contop
yleft
en0px
cada. - También estamos eliminando eventos de puntero para evitar cualquier interacción del usuario en las partículas HTML mientras están en la pantalla.
Debido a que el estilo del botón y el diseño de la página no es realmente el propósito de este artículo, lo dejaré a un lado.
Configuración de JavaScript
Aquí están los seis pasos que seguiremos en nuestro JavaScript:
- Escuche el evento de clic en el botón
- Crear 30
<particle>
elementos y añádalos a la<body>
- Establecer un aleatorio
width
,height
ybackground
por cada partícula - Animar cada partícula desde la posición del mouse a un lugar aleatorio a medida que se desvanecen
- Quitar el
<particle>
del DOM cuando la animación está completa
Paso 1: el evento de clic
// We first check if the browser supports the Web Animations API
if (document.body.animate) {
// If yes, we add a click listener on our button
document.querySelector('#button').addEventListener('click', pop);
}
Paso 2: las partículas
// The pop() function is called on every click
function pop(e) {
// Loop to generate 30 particles at once
for (let i = 0; i < 30; i++) {
// We pass the mouse coordinates to the createParticle() function
createParticle(e.clientX, e.clientY);
}
}
function createParticle(x, y) {
// Create a custom particle element
const particle = document.createElement('particle');
// Append the element into the body
document.body.appendChild(particle);
}
Paso 3: ancho, alto y fondo de las partículas
function createParticle (x, y) {
// [...]
// Calculate a random size from 5px to 25px
const size = Math.floor(Math.random() * 20 + 5);
// Apply the size on each particle
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// Generate a random color in a blue/purple palette
particle.style.background = `hsl(${Math.random() * 90 + 180}, 70%, 60%)`;
}
Paso 4: anima cada partícula
function createParticle (x, y) {
// [...]
// Generate a random x & y destination within a distance of 75px from the mouse
const destinationX = x + (Math.random() - 0.5) * 2 * 75;
const destinationY = y + (Math.random() - 0.5) * 2 * 75;
// Store the animation in a variable because we will need it later
const animation = particle.animate([
{
// Set the origin position of the particle
// We offset the particle with half its size to center it around the mouse
transform: `translate(${x - (size / 2)}px, ${y - (size / 2)}px)`,
opacity: 1
},
{
// We define the final coordinates as the second keyframe
transform: `translate(${destinationX}px, ${destinationY}px)`,
opacity: 0
}
], {
// Set a random duration from 500 to 1500ms
duration: 500 + Math.random() * 1000,
easing: 'cubic-bezier(0, .9, .57, 1)',
// Delay every particle with a random value from 0ms to 200ms
delay: Math.random() * 200
});
}
Debido a que tenemos un retraso aleatorio, las partículas que esperan comenzar su animación son visibles en la parte superior izquierda de la pantalla. Para evitar esto, podemos establecer una opacidad cero en cada partícula en nuestro CSS global.
particle {
/* Same as before */
opacity: 0;
}
Paso 5: elimine las partículas después de que se complete la animación
Es importante eliminar los elementos de partículas del DOM. Dado que creamos 30 elementos nuevos con cada clic, la memoria del navegador puede llenarse bastante rápido y hacer que las cosas se vuelvan locas. Así es como podemos hacer eso:
function createParticle (x, y) {
// Same as before
// When the animation is finished, remove the element from the DOM
animation.onfinish = () => {
particle.remove();
};
}
Resultado final
Poner todo junto nos da lo que estamos buscando: una colorida explosión de bondad de partículas.
¿No ves la animación en la demostración? Compruebe si su navegador es compatible con la API de animaciones web. en la mesa de apoyo en la parte superior del poste.
¡Ser creativo!
Debido a que todo esto usa CSS, es bastante simple modificar los estilos de partículas. Aquí hay cinco ejemplos que utilizan varias formas … ¡e incluso personajes!
O bueno, incluso podemos explotar el botón como Zach Saucier hizo en esta publicación.