Table of Contents
Creating Stunning Liquid Blast Effects with CSS & JavaScript
Web design is all about creating immersive, interactive user experiences. One way to make your website feel more dynamic is by adding unique visual effects that respond to user interactions.
One such effect that stands out is the Liquid Blast Effect—a mesmerizing animation that creates the illusion of liquid particles splashing outward from a central point. In this blog post, we’ll show you how to create a stunning Liquid Blast Effect using a combination of CSS and JavaScript.(source)
What are Liquid Blast Effects?
Liquid Blast Effects are a type of visual animation that simulates the movement of liquid particles or splashes. These effects can be triggered by user actions, such as a click, hover, or scroll.
The Liquid Blast Effect that we’ll be building in this tutorial creates a colorful burst of particles that scatter across the screen when a user clicks on a circle.
The animation uses CSS for styling and movement, while JavaScript controls the random placement and timing of each particle.
HTML Structure
Let’s start by looking at the HTML structure. It consists of a clickable circle element that will trigger the liquid burst effect when clicked. Additionally, there’s an SVG filter applied to give the entire effect a gooey, liquid-like appearance.
<html>
<head>
<title>Liquid Blast | TechyTechs</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="circle"></div>
<svg>
<filter id="gooey">
<feGaussianBlur in="SourceGraphic" stdDeviation="10"/>
<feColorMatrix values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 50 -10"/>
</filter>
</svg>
<script>
let circle = document.querySelector('.circle');
circle.addEventListener('click', function(){
for(let i = 0; i < 50; i++){
let particles = document.createElement('i');
particles.classList.add('particles');
let randomX = (Math.random() - 0.5) * window.innerWidth;
let randomY = (Math.random() - 0.5) * window.innerHeight;
particles.style.setProperty('--x', randomX+'px');
particles.style.setProperty('--y', randomY+'px');
let randomSize = Math.random() * 60 + 10;
particles.style.width = randomSize + 'px';
particles.style.height = randomSize + 'px';
let duration = Math.random() * 3 + 2;
particles.style.animation = `animate ${duration}s ease forwards`;
document.body.appendChild(particles);
setTimeout(function(){
particles.remove();
},5000);
}
})
</script>
</body>
</html>
In this HTML structure:
- The circle div is the trigger for the liquid blast effect. When clicked, it generates particles that scatter across the screen.
- The SVG filter is used to apply a gooey visual effect to everything inside the body, giving the particles a liquid, fluid-like appearance.
- The JavaScript code listens for a click event on the circle, creates 50 randomly positioned particles, and animates them with a random size and movement.
JavaScript Functionality
The JavaScript plays a crucial role in creating the Liquid Blast Effect. It handles the generation of the particles, their random size, movement, and removal after a set duration.
Here’s what happens step-by-step in the script:
- Listening for Clicks: We select the
.circleelement and add an event listener for theclickevent. - Generating Particles: When the circle is clicked, the script creates 50
<i>elements with the classparticles. Each particle is assigned a random size, position, and animation duration. - Random Positioning: The particles are randomly placed on the screen by setting
--xand--yCSS properties. - Animation: Each particle is animated using the
@keyframes animaterule, making it move from the circle to random locations on the screen. - Particle Removal: After a few seconds (5000ms), the particles are removed from the DOM to keep the page clean.
CSS Styling and Animation
Let’s now dive into the CSS that brings everything together. The following CSS is responsible for styling the circle, particles, and the animation effect that makes the Liquid Blast Effect so engaging.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1d2b3a;
overflow: hidden;
filter: url(#gooey);
}
.circle {
position: relative;
width: 200px;
height: 200px;
background: linear-gradient(90deg, #f00, #0ff);
border-radius: 50%;
cursor: pointer;
}
.particles {
position: absolute;
border-radius: 50%;
background: linear-gradient(90deg, #f00, #0ff);
z-index: -1;
}
@keyframes animate {
0%, 100% {
transform: translate(0, 0);
}
50% {
transform: translate(var(--x), var(--y));
}
}
svg {
width: 0;
height: 0;
}
Key CSS Features:
Circle Styling:
- The
.circleis a simple circular element with a gradient background that changes from red to cyan. It’s set up withborder-radius: 50%to make it round andcursor: pointerto indicate it’s interactive.
- The
Particle Styling:
- The
.particleselements are also circular (border-radius: 50%) with a similar gradient background. They are absolutely positioned, so they can move freely across the screen.
- The
Animation:
- The particles are animated using the
@keyframes animaterule. Initially, they have no movement (transform: translate(0, 0)), but at the midpoint of the animation, they are moved to a random position determined by the--xand--yvariables set by JavaScript.
- The particles are animated using the
SVG Filter:
- The SVG filter applied to the body (
filter: url(#gooey)) gives everything inside the body a gooey effect. This makes the particles look like they’re made of liquid and adds a fluid, smooth transition between their movements.
- The SVG filter applied to the body (
Why Use Liquid Blast Effects?
Enhanced Interactivity: The Liquid Blast Effect is a visually stunning way to engage users. By creating a burst of particles when the user clicks, you draw attention to key elements on the page.
Unique Visual Appeal: With its gooey, fluid-like look, this effect adds a unique and playful element to any website, making it stand out from the typical static designs.
Customizable: The effect is highly customizable. You can change the size, colors, number of particles, and speed of the animation to fit the design and branding of your website.
Conclusion
The Liquid Blast Effect is an exciting way to add some interactive flair to your website. By combining CSS and JavaScript, you can create a dynamic and engaging animation that reacts to user input.
The effect is fully customizable, making it a versatile addition to any web project. Whether you’re designing a landing page, or portfolio, or just want to add something fun to your site, the Liquid Blast Effect is sure to impress.
