Creating visually appealing animations can greatly enhance the user experience on a website. In this guide, we’ll explore how to create an impressive CSS particle animation using the mathematical functions sin() and cos(). This technique, which doesn’t rely on JavaScript or external libraries, demonstrates the power and flexibility of CSS. We’ll break down the process step-by-step and provide you with the necessary code to implement this animation on your own website.
Why CSS Particle Animation?
Particle animations add a dynamic and engaging element to web pages. They can be used in backgrounds, hover effects, or even as part of interactive user interfaces. Using CSS for these animations ensures better performance and compatibility across different devices and browsers.
Understanding the Basics
Before diving into the animation, it’s essential to understand the basic concepts of trigonometry that we’ll be using. The sin() and cos() functions are fundamental in creating circular motion and positioning elements in a circular path. By manipulating these functions, we can create a smooth and captivating particle animation.
Trigonometric Functions in CSS
The sin() and cos() functions return values based on the angle provided, which can be used to calculate the x and y coordinates of particles. These values help in creating a circular motion for each particle, giving the illusion of them moving in a wave-like pattern.
Step-by-Step Guide to Creating the Animation
Step 1: Setting Up the HTML Structure
To start, you’ll need a basic HTML structure with a container element to hold the particles. This container will be styled and positioned using CSS.
Step 2: Styling the Particles with CSS
Using CSS, we can define the properties of the particles, including size, color, and initial position. We also set up the animation properties, such as duration and delay, to ensure a smooth transition.
Step 3: Applying the Animation
The key to the animation lies in the CSS @keyframes rule. By defining keyframes, we can control the movement of each particle over time, creating the desired wave-like effect.
Step 4: Calculating Positions with sin() and cos()
In the CSS, we use custom properties (CSS variables) to calculate the positions of the particles dynamically. The sin() and cos() functions help in determining the x and y coordinates based on the particle’s index and the total number of particles.
Implementation and Customization
You can easily customize the particle animation by adjusting the number of particles, their size, speed, and colors. This flexibility allows you to tailor the animation to fit the aesthetic of your website or project.
Conclusion
CSS particle animations created using trigonometric functions are a powerful tool for web developers. They offer a way to add engaging visual effects without relying on JavaScript. By understanding the basics of sin() and cos() and following the steps outlined above, you can create stunning animations that enhance the user experience.
You can copy the full code for this particle animation below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particle Animation</title>
<style>
.particle {
/* Starting values */
--angle: (5 * var(--index));
--radius: 30;
--x: calc(sin(var(--angle)) * var(--radius) * 1vmin);
--y: calc(cos(var(--angle)) * var(--radius) * 1vmin);
--angle2: calc(var(--index) * 1turn / var(--total));
--x2: calc(sin(var(--angle2)) * var(--radius) * 1vmin);
--y2: calc(cos(var(--angle2)) * var(--radius) * 1vmin);
--size: 5;
--speed: 3s;
--delay: calc(var(--index) * var(--speed) / var(--total) * 4);
--hue-angle: 10;
--hue-range: 60;
--hue-start: 20;
/* Animation */
animation: animation var(--speed) ease-out infinite alternate var(--delay);
transform: translate3d(var(--x), var(--y), 0);
opacity: 0;
/* Particle styling */
border-radius: 50%;
background: currentColor;
color: oklch(75% 0.3
calc(
sin(var(--hue-angle) * var(--index))
* var(--hue-range)
+ var(--hue-start)
)
);
position: absolute;
width: calc(var(--size) * 0.1vmin);
height: calc(var(--size) * 0.1vmin);
contain: strict; /* Does this help or is translate3d already doing it*/
}
@keyframes animation {
100% {
transform: translate3d(var(--x2), var(--y2), 0);
opacity: 1;
}
}
/* Pen styling, ignore */
body {
background: #000;
display: flex;
min-height: 100vh;
justify-content: center;
align-content: center;
align-items: center;
overflow: hidden;
}
</style>
</head>
<body>
<div class="center" style="--total: 1080">
<script>
var total = 360 * 3;
var container = document.querySelector('.center');
for (var i = total; i--; ) {
var particle = document.createElement('div');
particle.className = 'particle';
particle.style.setProperty('--index', total - i);
container.appendChild(particle);
}
</script>
</div>
</body>
</html>
Feel free to modify and experiment with the code to create your unique animations. Happy coding!