https://wplabo.idea-hack.com/blog/code-catalog/frontend/29444/
7 instant codes for using animation background with ‘bubbly-bg ‘

7 instant codes for using animation background with ‘bubbly-bg ‘

We provide 3 instant code collection for animation background which is easily realized with ‘bubbly-bg’.

“bubbly-bg ” that makes it easy to use animation background for template developers.

bubbly-bg makes it easy to introduce animation background to your site.

However, if you do not know how to use it is surprisingly difficult to implement. So I created instant code collection that so that you can introduce it easily.

bubbly-bg | Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped)

Parametor

javascript
bubbly({
    animate: false, // default is true
    blur: 1, // default is 4
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () => `hsla(0, 0%, 100%, ${r() * 0.1})`)
    bubbles: 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);
    canvas: document.querySelector("#background"), // default is created and attached
    colorStart: "#4c004c", // default is blue-ish
    colorStop: "#1a001a",// default is blue-ish
    compose: "lighter", // default is "lighter"
    shadowColor: "#0ff", // default is #fff
    angleFunc: () => Math.random() * Math.PI * 2, // default is this
    velocityFunc: () => 0.1 + Math.random() * 0.5, // default is this
    radiusFunc: () => 4 + Math.random() * 25 // default is 4 + Math.random() * width / 25
});
animate Whether to animate
blur The degree of blurring of bubbles
bubbleFunc Bubble color
bubbles Number of bubbles
canvas The element to draw
colorStart Background color gradient
ColorStop Background color gradient
compose Element composition method
shadowColor Shadow color
angleFunc Direction of movement of bubbles
velocityFunc Bubble movement speed
radiusFunc Bubble size

Introduction

These are assets in demos in this post.

CSS

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

Javascript

html
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bubbly-bg/1.0.0/bubbly-bg.js"></script>

Code collection

1: Leave the default setting

html
<main>
	<div id="pagepiling">
		<div class="section" id="section1">
			<div class="container">
				<h1 class="text-center py-4">bubbly-bg</h1>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
		</div>
	</div>
</main>
css
body {
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
}
javascript
bubbly();

bubbly-bg Ex:2 Black/red with red bubbles

html
<main>
	<div id="pagepiling">
		<div class="section" id="section1">
			<div class="container">
				<h1 class="text-center py-4">bubbly-bg</h1>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
		</div>
	</div>
</main>
css
body {
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
}
javascript
bubbly({
    colorStart: "#111",
    colorStop: "#422",
    bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
});

bubbly-bg Ex:3 Purple with multicolored bubbles

html
<main>
	<div id="pagepiling">
		<div class="section" id="section1">
			<div class="container">
				<h1 class="text-center py-4">bubbly-bg</h1>
				<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				</p>
			</div>
		</div>
	</div>
</main>
css
body {
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
}
javascript
bubbly({
    colorStart: "#4c004c",
    colorStop: "#1a001a",
    bubbleFunc: () => `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`
});

bubbly-bg Ex:4 Yellow/pink with red/orange/yellow bubbles

If you liked this article
please click on the "Like!".

Follow on Twetter !

Related Posts