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.
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
<body> ... <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bubbly-bg.js"></script> <script>bubbly();</script> </body>
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
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.