{"id":2286,"date":"2019-06-01T03:31:46","date_gmt":"2019-06-01T03:31:46","guid":{"rendered":"https:\/\/azoora.com\/blog\/?p=2286"},"modified":"2020-07-03T00:06:30","modified_gmt":"2020-07-03T00:06:30","slug":"10-nice-examples-of-particle-animation-in-web-design","status":"publish","type":"post","link":"https:\/\/azoora.com\/blog\/code\/10-nice-examples-of-particle-animation-in-web-design\/","title":{"rendered":"10 Nice Examples of Particle Animation in Web Design"},"content":{"rendered":"\n<p>Taking the Web by storm, particle animations managed to carve out quite a niche for themselves several years ago. The massive current obsession with designs that have a high-tech vibe and geometric decor makes them one of the more sought-after solutions today.<\/p>\n\n\n\n<p>As a rule, particle animation can be seen in hero sections like, for example, in&nbsp;<a href=\"https:\/\/jetup.digital\/\" target=\"_blank\" rel=\"noreferrer noopener\">JetUp Digital<\/a>.<\/p>\n\n\n\n<p>As you can see, it is an elegant way to add a certain spice to the first impression, while delicately and unobtrusively separating the website from the crowd.<\/p>\n\n\n\n<p>To reproduce this effect, your first step should be the&nbsp;<a href=\"https:\/\/vincentgarreau.com\/particles.js\/\" target=\"_blank\" rel=\"noreferrer noopener\">particles.js<\/a>.<\/p>\n\n\n\n<p>It is a lightweight plugin by Vincent Garreau that is the heart and soul of the majority of particle animations out there. This plugin can be interfaced with various other softwares, videlicet, a movie maker at <a href=\"https:\/\/www.makewebvideo.com\/en\/make\/movie-trailer-video\">makewebvideo.com\/en\/make\/movie-trailer-video<\/a>. What\u2019s more, in its original state, it is one of the most copied solutions around the web \u2013 though maybe not with such a high intensity as in the author\u2019s example.<\/p>\n\n\n\n<h2>Using Particle Animation to Impress<\/h2>\n\n\n\n<p>As time went by, the technique matured. From the chaotic mess of tiny white dots that were scattered throughout the canvas, it transformed into a tool with great potential. It is not something extraordinary, yet it has a certain oomph factor. Moreover, it perfectly contributes to high-tech, geometric and businesslike aesthetics \u2013 naturally finishing them off.<\/p>\n\n\n\n<p>The premise is: particle animation should impress. And, developers stick to this postulate through thick and thin, making the most out of it. Let\u2019s consider some phenomenal code snippets created by the real fans of this solution.<\/p>\n\n\n\n<h3>1. 30,000 Particles by Justin Windle<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"30,000 Particles\" id=\"cp_embed_Ffvlo\" src=\"https:\/\/codepen.io\/soulwire\/embed\/preview\/Ffvlo?height=300&amp;slug-hash=Ffvlo&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Here the title speaks for itself. With 30,000 particles on board, you expect something grandiose. And Justin Windle has certainly met our expectations. His concept is incredible. Use your mouse to play around. The physics are just exceptional. This version of particle animation is quite popular among developers, though not in such a monumental scale.<\/p>\n\n\n\n<h3>2. Fish in Water by Alex Safayan<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Particles #22 - Fish in Water\" id=\"cp_embed_VYmXLM\" src=\"https:\/\/codepen.io\/alexsafayan\/embed\/preview\/VYmXLM?height=300&amp;slug-hash=VYmXLM&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Alex Safayan came up with almost the same solution, but in this case, particles are increasingly enlarged. The mouse cursor also pushes away the dots, forming a trace with a subtle ripple effect. The behavior of the animation is reminiscent of fish movement when it is close to the water surface. Note the physics: the interplay between the dots is well-thought-out.<\/p>\n\n\n\n<h3>3. PLANKTON \u2013 Particles life by Marco Dell\u2019Anna<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"PLANKTON - Particles life\" id=\"cp_embed_YVKZgd\" src=\"https:\/\/codepen.io\/plasm\/embed\/preview\/YVKZgd?height=300&amp;slug-hash=YVKZgd&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Having received an award for the most hearted project of 2017, Plankton is certainly worthy of attention. The project enthralls not only with the idea but also with the realization. From the subtle coloring that fits here like a glove to a magnificent behavior that looks incredibly natural, Marco Dell\u2019Anna has an eye for detail.<\/p>\n\n\n\n<h3>4. STARDUST by Marco Dell\u2019Anna<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"STARDUST\" id=\"cp_embed_eyKzgG\" src=\"https:\/\/codepen.io\/plasm\/embed\/preview\/eyKzgG?height=300&amp;slug-hash=eyKzgG&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>I adore the magnificent retro vibe, neon touches and gorgeous coloring here. It\u2019s so hard to take your eyes off of it. Stardust is a symbiosis of design and coding that results in an inspiring masterpiece.<\/p>\n\n\n\n<h3>5. Gravity Points by Akimitsu Hamamuro<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Gravity Points\" id=\"cp_embed_rHIsa\" src=\"https:\/\/codepen.io\/akm2\/embed\/preview\/rHIsa?height=300&amp;slug-hash=rHIsa&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Akimitsu Hamamuro invites you to add so-called \u201cgravity points\u201d in his playground. They intrude into the chaotic movement of the dots and pull them like a magnet. Although they do not perform a role of center of orbit; yet they form focal points that force particles to move in their direction.<\/p>\n\n\n\n<h3>6. Particle Orb CSS by Nate Wiley<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Particle Orb CSS\" id=\"cp_embed_GgONKy\" src=\"https:\/\/codepen.io\/natewiley\/embed\/preview\/GgONKy?height=300&amp;slug-hash=GgONKy&amp;default-tabs=css,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Spheres are quite popular stylistic choices for hero areas these days. And Nate Willey\u2019s take on this trend is quite impressive. The orb looks fragile thanks to tiny particles, and at the same time, firm thanks to well-thought-out behavior. His routine of disintegrating and re-forming the sphere is fantastic.<\/p>\n\n\n\n<h3>7. Particle Waves by Kevin Rajaram<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Particle Waves\" id=\"cp_embed_AJtmF\" src=\"https:\/\/codepen.io\/kevinsturf\/embed\/preview\/AJtmF?height=300&amp;slug-hash=AJtmF&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Kevin Rajarm took the beauty and elegance of particle animation and enhanced it with the awesomeness of&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/speckyboy.com\/three-js-in-action\/\" target=\"_blank\">Three.js<\/a>, bringing about a delicate yet truly sophisticated concept. An amazing vista of waves feels futuristic, artificial and mesmerizing.<\/p>\n\n\n\n<h2>Unorthodox Uses<\/h2>\n\n\n\n<p>There are even more impressive ways of using particle animation. Let\u2019s get off the beaten path and think out-of-the-box: the approach can easily benefit such elements as logotypes and letterings<\/p>\n\n\n\n<h3>8. Interactive Particle Logo by Tamino Martinius<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Interactive Particle Logo\" id=\"cp_embed_EDaun\" src=\"https:\/\/codepen.io\/Zaku\/embed\/preview\/EDaun?height=300&amp;slug-hash=EDaun&amp;default-tabs=html,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Interactive Particle Logo is a typical example of that. It looks like a re-imagined solution of Justin Windle\u2019s snippet that is featured above. Although there aren\u2019t 30,000 dots, it is composed of an impressive number of particles that skillfully form the word \u201cCODEPEN\u201d. This is one of those cases where the concept found a practical use.<\/p>\n\n\n\n<h3>9. Text to particles by Louis Hoebregts<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Text to particles\" id=\"cp_embed_obWGYr\" src=\"https:\/\/codepen.io\/Mamboleoo\/embed\/preview\/obWGYr?height=300&amp;slug-hash=obWGYr&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>The colorful version of the previous solution is available in this pen by Louis Hoebregts. Here text is shaped by a thousand of colorful solid circles that are enriched by the same interactivity as in the previous example.<\/p>\n\n\n\n<h3>10. Particles write text by Marco Dell\u2019Anna<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Particles write text\" id=\"cp_embed_zwjMPy\" src=\"https:\/\/codepen.io\/plasm\/embed\/preview\/zwjMPy?height=300&amp;slug-hash=zwjMPy&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Though this is not a dramatic entrance, there is something bewitching about it. The smooth&nbsp;animation&nbsp;slowly uncovers characters and ignites our interest. The concept has a certain mysterious flair similar to the \u201cStranger Things\u201d&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.youtube.com\/watch?v=4LLXCqHNmnE\" target=\"_blank\">intro<\/a>.<\/p>\n\n\n\n<h3>11. JUST DO IT by Marco Dell\u2019Anna<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"JUST DO IT.\" id=\"cp_embed_pPWrqV\" src=\"https:\/\/codepen.io\/plasm\/embed\/preview\/pPWrqV?height=300&amp;slug-hash=pPWrqV&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>This is another masterpiece from Marco Dell\u2019Anna. This time, particle animation takes part in shaping a famous Nike logotype. From obscure and semi-transparent to crisp and solid, the animation gradually exposes the logo, unobtrusively seizing the overall attention.<\/p>\n\n\n\n<h3>12. 404 particle text by Enrico Toniato<\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-codepen\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"404 particle text\" id=\"cp_embed_gbzJYO\" src=\"https:\/\/codepen.io\/enricotoniato\/embed\/preview\/gbzJYO?height=300&amp;slug-hash=gbzJYO&amp;default-tabs=js,result&amp;host=https:\/\/codepen.io\" scrolling=\"no\" frameborder=\"0\" height=\"300\" allowtransparency=\"true\" class=\"cp_embed_iframe\" style=\"width: 100%; overflow: hidden;\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>If you think that the only practical use of particle animation is enriching hero sections, then Enrico Toniato will prove you wrong. His take on the error page is brilliant. Follow his idea and use particles set in motion to save the&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/speckyboy.com\/creative-website-404-pages\/\" target=\"_blank\">404 page<\/a>&nbsp;from looking boring and repulsive.<\/p>\n\n\n\n<h2>An Attention-Grabbing Effect<\/h2>\n\n\n\n<p>Particle animation is one of those cases where smaller is better. The tinier the dots, the more impressive of an effect that can be achieved. On the one hand, it looks sophisticated and intricate since geometry and physics are involved. On the other hand, it looks fragile and subtle thanks to delicate shapes. This unique fusion makes particle animation exceptional and attention-grabbing.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Taking the Web by storm, particle animations managed to carve out quite a niche for themselves several years ago. The massive current obsession with designs that have a high-tech vibe and geometric decor makes them one of the more sought-after solutions today. As a rule, particle animation can be seen in hero sections like, for [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2288,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[4,81,12],"tags":[93,25,136,116,82,87],"jetpack_featured_media_url":"https:\/\/azoora.com\/blog\/wp-content\/uploads\/2019\/06\/STARDUST.jpg","jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/p7FQPL-AS","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2286"}],"collection":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/comments?post=2286"}],"version-history":[{"count":3,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2286\/revisions"}],"predecessor-version":[{"id":4478,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/posts\/2286\/revisions\/4478"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media\/2288"}],"wp:attachment":[{"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/media?parent=2286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/categories?post=2286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/azoora.com\/blog\/wp-json\/wp\/v2\/tags?post=2286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}