Bubbly Backgrounds: Moving Backgrounds for Your Website

It’s not modern if it doesn’t move. Of course, this also applies to your website’s background. Bubbly Backgrounds are at your service.

JavaScript for Bubbles

Bubbly Backgrounds is a very small JavaScript written by a Norwegian developer called David who goes by the name of Tipsy on Github. With its compressed 696 bytes, the short script won’t overload any website, but will cause just the right amount of motion, as shown in the following preview GIF:

Watching the round bubbles on their journey through the colorful page background is almost meditative. Just focus on in- and exhaling, and start relaxing.

Use it With Two Lines

All jokes aside. If you’re looking for a fashionable accessory for websites, you can sit back and use Tipsy’s JavaScript. Assuming you wanted to create a page that only consists of the bubbly background, your HTML looked like this:

<body>
  ...
  <script src="https://cdn.jsdelivr.net/npm/bubbly-bg@0.2.3/dist/bubbly-bg.js"></script>
  <script>bubbly();</script>
</body>

Drag the JavaScript into your project via a CDN, for instance, and start it by calling the function bubbly();. Bubbly creates a canvas element that is assigned to the body tag. The canvas always takes up the entire viewport. Thus, there’s no further fidgeting needed. Just use the snippets shown above, and you’re ready to go.

More Options Via Parameters

However, if you do that, all you get is a blue background with white to hazy blue bubbles floating around. Since this may not meet everyone’s taste, Tipsy gives us several parameters to adjust the background and bubbles to your desires.

Tipsy shows you three examples of this right away. This should cover any color taste:

As this is nothing but color specifications and mathematical parameters, you should toy around with the options to create your very own bubbly background.

Open Source and Free

On the project’s Github page, you’ll find the required code snippets in a way that’s more legible than the screenshot shown above. This is where you can download the JavaScript if you don’t want to integrate it via Node or CDN.

Live demos of the four examples can be found here.

Bubbly Backgrounds is distributed under the liberal Apache license 2.0, which allows you to use and alter the original material for free, even for commercial purposes, as long as the license information and the copyright notes are not removed from the source code.

Dieter Petereit

Dieter Petereit is a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called web design and has carried on ever since. Two decades ago he started writing for several online publications, some well, some lesser known. You can meet him over on Google+.

Leave a Reply

2 Comments on "Bubbly Backgrounds: Moving Backgrounds for Your Website"

Notify of
avatar
Sort by:   newest | oldest | most voted
Riyaz
Guest

I like the fourth one bubbly background. Soon going to use on my next project.

Davidd
Guest

Wow! it looks good. I will try this out in my next project.

wpDiscuz