Free PHPFree PHP scripts classes and info

Boom! Examining Explosions in Web Design

There are many ways to grab the audience’s attention. We are spoiled with choice, even though the current state of technologies is still imperfect. We are experiencing some browser compatibility issues, and not every device can deal with all those grandiose solutions that web developers bring to us.

Nevertheless, the days of static websites where images were the main driving force and sliders with fancy transitions were the only spice have gone. We are witnessing an era of bold ideas and extravaganzas.

Among the greatest aspects is that developers don’t limit their focus to big things. Yes, we can see numerous canvas animations, overwhelming VR and video experiments that require a full-screen mode, etc. However, today even the tiniest details get their own dose of attention.

Websites are teeming with microscopic solutions, especially those that are based on the mouse cursor. We can stumble upon numerous smart ideas. They are fantastic, but in the majority of cases they are (what’s the word I’m looking for?), “quiet”. I’m not talking about them making sounds since some of the mouse-based solutions actually do make a sound. I’m talking about their behavior.

Their behavior is smooth, calm and gentle. In some cases, it is so seamless that it is barely perceptible. And if you are too engaged with the content or there are some other distracting elements, the chances are you can even overlook them. So, why not to make them a bit “louder”, so that users won’t miss an opportunity to enjoy them?

How to do this, you may ask. I have one good solution: make things explode – literally and figuratively.

Particles in space by Dean Wagman

Take, for example, this fantastic code snippet created by Dean Wagman. Although this is the first canvas experiment conducted by Dean, nevertheless it is highly inspiring. All you need to do is to click anywhere on the screen, and you will see a blast of hundreds of small bright particles that are flying right at your face. Even though it does not make a sound, it certainly feels tumultuous.

See the Pen
Particles in space by Dean Wagman (@deanwagman)
on CodePen.

Explosion effects always awaken a feeling that something loud has happened. So, why not to use this to our advantage and add some noise without making an actual sound? The more so, we have a selection of fantastic code snippets here. Let’s explore them together.

Particle explosion by Aleksei / Kaboomerz by Christopher Lis

If the solution by Dean Wagman looks a bit too much, you can always try Particle explosion by Aleksei. Or if, on the contrary, you need to make a more significant impact you can always adopt Kaboomerz by Christopher Lis.

The first code snippet features a “little brother” version of Dean’s explosion, where dozens of tiny particles form a small blast that quickly appears and dies. In the case of Christopher Lis, you will be surprised by the size of the particles. The confetti that emerges from the mouse cursor is tremendously huge. However, thanks to their short lifespan, the overall effect is not overwhelming. It is just pleasing.

See the Pen
Particle explosion JS/CSS3 by Aleksei (@alek)
on CodePen.

See the Pen
#Codevember 5 – Kaboomerz by Christopher Lis (@chriscourses)
on CodePen.

DOM explosions by David A.

If you like this idea but need something more digital-like and retro-inspired, then there is an amazing solution created by David. He uses rectangles of various sizes instead of circles to achieve a lovely 8-bit touch. As a result, we can witness a small blast with ‘80s charisma.

See the Pen
DOM explosions by David A. (@meodai)
on CodePen.

WebGL Sparkles by CreateJS

If you seek a realistic version, WebGL Sparkles by CreateJS is a perfect example to consider. Even though all of the particles here are white, thanks to the well-thought-out behavior it looks like real celebratory gunfire when you click on the screen. What’s more, the cursor has a lovely trail that gives the scene a touch of magic.

See the Pen
CreateJS: WebGL Sparkles by CreateJS (@createjs)
on CodePen.

Automatic Firework Launcher by Christopher Lis

Speaking of which, our collection of explosions won’t be complete without a dose of pyrotechnics madness. Automatic Firework Launcher by Christopher Lis is a fantastic example to consider. It is a cartoonish firework launcher. Thanks to colorful particles and carnation-like shapes, it reminds us of real fireworks that light up the starry sky.

See the Pen
Day 29 – Automatic Firework Launcher by Christopher Lis (@chriscourses)
on CodePen.

Modal window destroy concept by LegoMushroom

Canvas experiments are not the only ones in our list. Explosion effects can be applied to various elements of the interface, like a modal window. LegoMushroom has vivid proof of that. Take a look at their modal window concept. When you close the window, instead of just disappearing, it breaks into several pieces. It is a perfect addition to all those fancy fully-illustrated websites that are quite popular these days.

See the Pen
Modal window destroy concept by LegoMushroom (@sol0mka)
on CodePen.

SCSS Explosion Effect by Sylvain Garnot / SVG text explosion by Kacper Bawol / Canvas text explosion by Tim Horwood

Explosion effects can be beneficial for typography as well. Consider the SCSS Explosion Effect by Sylvain Garnot, SVG text explosion by Kacper Bawol and Canvas text explosion by Tim Horwood.

All three demonstrate an explosion effect applied to the text. Predictably, the mouse cursor triggers each one.

Sylvain Garnot lets users blow each letter up into a hundred tiny squares. The concept by Kacper Bawol looks almost the same, yet this time the symbol breaks into small triangles. And, Tim Horwood allows users to blow the entire text up into tiny particles that eventually come back and return everything to its original state. All three ideas are just incredible.

See the Pen
SCSS – Explosion Effect by sylvain garnot (@sylvaingarnot)
on CodePen.

See the Pen
Svg text explosion by Kacper Bawol (@Casperovic)
on CodePen.

See the Pen
Canvas text explosion, click to view by Tim Horwood (@tdhorwood)
on CodePen.

House Explosion by Ko.Yelie

The explosion effect can be also applied to images. This concept by Ko.Yelie is a great example. By clicking on the picture, you blow it up to tiny pieces. Although it is difficult to find an application for this in real life interfaces, it is always great to have some extraordinary solutions at your fingertips that can make common things look one-of-a-kind.

See the Pen
House Explosion by Ko.Yelie (@ko-yelie)
on CodePen.

An Explosive Feature

An explosion effect is a controversial tool. It is not suited for each and every interface out there because of its “explosive” nature and powerful charisma. Even though it seems harmless and even neutral when applied in tandem with the mouse cursor, it is pretty “loud” – so you need to be cautious.

Remember, not all people seek entertainment from websites. And not everyone is up to extravaganzas and overwhelming impressions. At the end of the day, content always remains the king.

However, if you are looking for some unusual ways to make for an exciting user interaction that is playful and so-to-say “loud”, then an explosion effect can undoubtedly come in handy.

The post Boom! Examining Explosions in Web Design appeared first on Speckyboy Design Magazine.