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.
Banner Image by Tobias Dahlberg from Pixabay
Send Comment:
2 Comments:
More than a year ago
Wow! it looks good. I will try this out in my next project.
More than a year ago
I like the fourth one bubbly background. Soon going to use on my next project.