[Free Widget] Aurora

Options
visioncraft
visioncraft Member Posts: 151 Learner
edited April 4 in Ask a Question

We've created a custom widget to use for the Hero Banner of our home page, which we're happy to share with the Duda Community. We called it "Aurora", because it creates an animation of morphing, blending colours that reminds us a little of an Aurora Borealis.

The animation is surprisingly simple, totally CSS-based, and is made entirely with just 3 <div> elements that use gradient backgrounds and CSS blend modes. This makes the widget extremely lightweight, so it shouldn't add any noticeable page loading time to your site at al.

Choose Your Colours

In the widget's Content Editor you will be able to specify colours you want to use in the animation. You can specify colours using any CSS notation (named colours, hex, rgb, etc.). Try 'red', 'green' and 'blue'. Then try 'cyan', 'magenta' and 'yellow'. Use 5 or 6 colours for a more complex animation. Then try your own brand colours.

Change The Animation

In the Design Editor you will be able to really customise the animation, by changing the speed of its individual elements, and playing with different CSS blend modes. The combinations are practically endless, and give you a very wide range of different effects.

How To Get It

If you'd like to give Aurora a try, just message me directly, and I'll send you a share link. There is no cost — we just want to give a little back to the amazing Duda Community.

If you do use it, please post a link here so we can see it live. If you find any issues or bugs, or have feature requests, please message me so we can follow it up for you.

Enjoy!

Tagged: