Particle effects in Edge Animate

Default avatar.
April 09, 2013
Particle effects in Edge Animate.

ThumbnailOne of the most exciting perks of using Adobe's Edge Animate is the seamless integration with new, exciting CSS features that I didn't even know existed until exploring Edge Animate further. This tutorial shows you how to make a 3D particle effect, using just a few ellipses, no additional plugins and a special "blur" filter made accessible in Edge Animate and CSS3.

This tutorial explains how to utilise a number of features in Edge Animate, from creating shapes and manipulating them using filters, to grouping them as Symbols to move multiple elements quickly and efficiently, rather than tweening individual particles.

Once you're done, you can use this as a background for a web-based gallery banner, and perhaps layer content between your new particles; or even as a full-screen background for your website, constantly moving slowly to give your design a really subtle yet dynamic feel!

What effects have you created in Edge Animate? What would you like to be able to build? Let us know in the comments.

Featured image/thumbnail, particle image via Shutterstock.

Sam Piggott

Sam Piggott is a young digital designer and self-confessed jack-of-all-trades from London, UK. When he's not designing/coding/drinking copious amounts of coffee, Sam loves learning new software and air-drumming to whatever's on Spotify. Follow him on twitter @Sam_Piggott.

Read Next

3 Essential Design Trends, November 2024

Touchable texture, distinct grids, and two-column designs are some of the most trending website design elements of…

20 Best New Websites, October 2024

Something we’re seeing more and more of is the ‘customizable’ site. Most often, this means a button to swap between…

Exciting New Tools for Designers, October 2024

We’ve got goodies for designers, developers, SEO-ers, content managers, and those of you who wear multiple hats. And,…

15 Best New Fonts, September 2024

Welcome to our roundup of the best new fonts we’ve found on the web in the previous four weeks. In this month’s edition…

3 Essential Design Trends, October 2024

This article is brought to you by Constantino, a renowned company offering premium and affordable website design You…

A Beginner’s Guide to Using BlueSky for Business Success

In today’s fast-paced digital world, businesses are always on the lookout for new ways to connect with their audience.…

The Importance of Title Tags: Tips and Tricks to Optimize for SEO

When it comes to on-page SEO, there’s one element that plays a pivotal role in both search engine rankings and user…

20 Best New Websites, September 2024

We have a mixed bag for you with both minimalist and maximalist designs, and single pagers alongside much bigger, but…

Exciting New Tools for Designers, September 2024

This time around we are aiming to simplify life, with some light and fast analytics, an all-in-one productivity…

3 Essential Design Trends, September 2024

September's web design trends have a fun, fall feeling ... and we love it. See what's trending in website design this…

Crafting Personalized Experiences with AI

Picture this: You open Netflix, and it’s like the platform just knows what you’re in the mood for. Or maybe you’re…

15 Best New Fonts, August 2024

Welcome to August’s roundup of the best fonts we’ve found over the last few weeks. 2024’s trend for flowing curves and…