8 Snippets That Demonstrate the Repelling Effect in Web Design
Experiments with canvas are the talk of the town these days. They can be seen not only as concepts in the popular web developer playgrounds but also as solutions for real-life projects. The variety is undoubtedly astonishing: From primitive particle animations based on popular plugins to one-of-a-kind ideas that are an interfusion of modern and time-proven tools.
Today, we wish to draw your attention towards the repelling effect. Even though it has a repulsive behavior, it certainly has an attractive nature. Encouraging users to play with the details of the scenery by pushing them in various directions, or in some cases, even blowing everything away, it instantly becomes the main entertainment. It makes the user experience enjoyable and exciting.
Let’s explore a collection of inspiring demos with code snippets so you can see the unique trend for yourself.
Repeling Lines
At first sight, this demo is reminiscent of a set of guitar strings. Move your cursor over them, and you will see the magic. The lines begin to bend and deform, forming a small sphere.
The options panel on the right allows you to control the effect. You can set the radius of the mouse range, add or reduce the number of lines, or change the distance between the strings. Note the physics. It is well-thought-out and carefully reproduced.
See the Pen Repeling Lines by Daniel Velasquez
30,000 Particles
The repelling effect looks simply awesome when applied to thousands of dots instead of lines. Justin Windle proves this in practice. His iconic and wildly popular project on CodePen features a panel where 30,000 tiny particles comfortably sit.
They are tightly packed together to create a dense surface. Hover the mouse cursor over it, and you will see how the dots run away from you. Though they do not disappear from view, they are held back by mouse range. Therefore, you can see a relatively large, hollow circle where dots form the border.
See the Pen 30,000 Particles by Justin Windle
Interactive Particles
If the simple rectangular frame does not inspire your creativity, you can always gather all those dots into characters as Tamino Martinius did in his Interactive Particles project.
His demo includes one word, where each letter is constructed from hundreds of dots. Blow them away with your mouse cursor to spice things up. There is a small control center where you can change the parameters of the experiment and adjust it to your preferences.
See the Pen Interactive Particle Logo by Tamino Martinius
Text to Particles
Let’s play with color and size to enrich the two previous concepts with some lively twists like Louis Hoebregts did in his Text to Particles project.
Unlike the solution by Tamino Martinius, here the dots have different radiuses as well as different colors. Moreover, you are welcome to change the text by setting it using the input. The mouse cursor has a smooth and gentle behavior that disperses the crowd and leads to a small disturbance in the playground. This is a truly eye-pleasing demo.
See the Pen Text to particles by Louis Hoebregts
Balls and Gravity
The repellent effect can be easily combined with other physics-based solutions to bring about outstanding outcomes. Consider Balls and Gravity.
The name of the project says it all. Gravity, as well as the repelling effect, lie in the heart of the concept – making the experience intriguing.
Unlike the previous examples, here you need to grab the circle and use it as an instrument for pushing the other circles away. You can almost hit these colorful flat balls, forcing them to move. In addition, you need to fight the gravity, which makes the experience even more exciting.
See the Pen BALLS&GRAVITY by Marco Dell’Anna
Attractor
This project by Marco Dell’Anna is also built around gravity. You can control it with your mouse cursor. Use it to move particles and rearrange their position.
Note, even though the particles will change their position, they will still strive to get back to the circle. So here, you can see a mouse cursor that plays the role of a magnet, and at the same time, a tool for pushing the dots away (at least, temporarily).
See the Pen Attractor – MatterJS by Marco Dell’Anna
Activate
Activate is an outstanding pen created by Gerard Ferrandez. Much like in the previous example, the author has also opted in favor of gravity. This time it is combined with fluid behavior and of course the repelling effect. As a result, the project lures us in with its frolic appearance and playful nature.
See the Pen activate by Gerard Ferrandez
Moar Plasma
The repelling effect can be of much help to particle animations as well. You can make them even more thrilling. Take a gander at Moar Plasma.
Here, you can see a chaotic animation where the mouse cursor scares all the particles away by pushing them to different sides. Not only can you enjoy the demo, but also interact with it.
See the Pen Moar Plasma by John Chin-Jew
Snowy Particles
Snowy Particles is another excellent example where the traditional particle animation gets a boost. Nat, the author of the pen, has used two tricks.
First, the mouse cursor has the power to transform simple dots into snowflakes, so that the scene feels genuinely magical. Secondly, a small repellent effect is added that slightly disperses the snowy mass so that you can see distinctive flakes of snow. Simply fantastic.
See the Pen particles.js snow by Nat
Repellers
Another area where the repelling effect brings benefits and easily converts a dull scene into an extravaganza is text effects. We have already seen how words created of a thousand dots look outstanding. It is time to change dots into lines and spice everything up with the repelling effect. Consider Repellers as a point in case.
The project features a word where symbols are made of short, thin lines that are directed at viewers. In this way, you can almost feel its volumetric nature. Grab your mouse cursor and drag it across the text, and you will see how the lines begin to dance.
Their behavior is smooth and eye-pleasing, even though the text itself feels a bit sharp and acute. Besides, the lines also move on their own, so it feels like there is a small breeze that sways parts of the composition. As a result, you can enjoy a true masterpiece where simple text runs the show.
See the Pen Repellers by Rein van der Woerd
Attraction Through Repulsion
Even though the repelling effect is used to push details of the composition away, still it is utterly magnetic. You cannot take your eyes off it. It instantly catches an eye with its playful behavior and nudges users to interact with the scene.
The repelling effect is not alone in its struggle of winning over the audience. It perfectly collaborates with other types of animations and effects bringing about unique, attention-grabbing solutions.
The post 8 Snippets That Demonstrate the Repelling Effect in Web Design appeared first on Speckyboy Design Magazine.