https://idea-hack.com/blog/107228/

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.

.wp-block-ug-button-block-3-e312772a-4e34-40cb-baa9-5eebf83f3af1 a { margin-top: 0px !important; margin-bottom: 20px !important; color: #545454 !important; background-color: #ececec; font-size: 16px !important; border-radius: 0px !important; padding: 10px 20px !important; }.wp-block-ug-button-block-3-e312772a-4e34-40cb-baa9-5eebf83f3af1 a:hover { background-color: #545454; color: #ffffff !important; } bubbly-bg | Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped)

Parametor

.wp-block-ug-code-block-1-7931da9a-ddc4-4261-8839-b81d128b1b97 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-7931da9a-ddc4-4261-8839-b81d128b1b97 pre code { font-size: 14px !important; }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

.wp-block-ug-code-block-1-f684b89c-043c-40b9-8dda-a582be3f521d { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-f684b89c-043c-40b9-8dda-a582be3f521d pre code { font-size: 14px !important; }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

.wp-block-ug-code-block-1-81671759-7251-4239-8515-90510917ab06 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-81671759-7251-4239-8515-90510917ab06 pre code { font-size: 14px !important; }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

.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d { margin-top: 20px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d pre code { font-size: 14px !important; }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>
.wp-block-ug-code-block-1-98610272-7623-4eea-b4b8-5f7e4f277bf5 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-98610272-7623-4eea-b4b8-5f7e4f277bf5 pre code { font-size: 14px !important; }css
body {
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
}
.wp-block-ug-code-block-1-06f2fee5-5cd5-4237-bb55-77d3b47f4e9a { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-06f2fee5-5cd5-4237-bb55-77d3b47f4e9a pre code { font-size: 14px !important; }javascript
bubbly();

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

.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d { margin-top: 20px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d pre code { font-size: 14px !important; }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>
.wp-block-ug-code-block-1-e842b076-e023-4061-a783-fa9b78b5d2bf { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-e842b076-e023-4061-a783-fa9b78b5d2bf pre code { font-size: 14px !important; }css
body {
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
}
.wp-block-ug-code-block-1-ceba1026-98d8-450c-9596-2c5abdc53a00 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-ceba1026-98d8-450c-9596-2c5abdc53a00 pre code { font-size: 14px !important; }javascript
bubbly({
    colorStart: "#111",
    colorStop: "#422",
    bubbleFunc: () => `hsla(0, 100%, 50%, ${Math.random() * 0.25})`
});

bubbly-bg Ex:3 Purple with multicolored bubbles

.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d { margin-top: 20px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d pre code { font-size: 14px !important; }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>
.wp-block-ug-code-block-1-f1ea2164-6c85-4968-8c30-ba5f7b6bb5bc { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-f1ea2164-6c85-4968-8c30-ba5f7b6bb5bc pre code { font-size: 14px !important; }css
body {
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
}
.wp-block-ug-code-block-1-561aa2c5-ee65-49e2-9243-ede4a9d8c912 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-561aa2c5-ee65-49e2-9243-ede4a9d8c912 pre code { font-size: 14px !important; }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

.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d { margin-top: 20px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d pre code { font-size: 14px !important; }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>
.wp-block-ug-code-block-1-a1e9f566-dae8-4d9a-81ad-65a31c87dcbf { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-a1e9f566-dae8-4d9a-81ad-65a31c87dcbf pre code { font-size: 14px !important; }css
body {
	color: #484848;
	font-family: 'Quicksand', sans-serif;
}
.wp-block-ug-code-block-1-1812ec78-3d6b-4a70-97b5-c228d75e3216 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-1812ec78-3d6b-4a70-97b5-c228d75e3216 pre code { font-size: 14px !important; }javascript
bubbly({
    colorStart: "#fff4e6",
    colorStop: "#ffe9e4",
    blur: 1,
    compose: "source-over",
    bubbleFunc: () => `hsla(${Math.random() * 50}, 100%, 50%, .3)`
});

bubbly-bg Ex:5 Other example 1

.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d { margin-top: 20px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d pre code { font-size: 14px !important; }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>
.wp-block-ug-code-block-1-dfe1c748-a36f-4d30-a71f-4b395e17b4a3 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-dfe1c748-a36f-4d30-a71f-4b395e17b4a3 pre code { font-size: 14px !important; }css
body {
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
}
.wp-block-ug-code-block-1-df3eb3a8-8e50-4260-9232-8c720081a73c { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-df3eb3a8-8e50-4260-9232-8c720081a73c pre code { font-size: 14px !important; }javascript
bubbly({
  blur:15,
  colorStart: '#194167',
  colorStop: '#112144',
  radiusFunc:() => 5 + Math.random() * 15,
  angleFunc:() => -Math.PI / 2,
  velocityFunc:() => Math.random() * 7.5,
  bubbleFunc:() => `hsla(${200 + Math.random() * 50}, 100%, 65%, .1)`,
  bubbles:350
});

bubbly-bg Ex:6 Other compliated example 2

.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d { margin-top: 20px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d pre code { font-size: 14px !important; }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>
.wp-block-ug-code-block-1-56d120f0-341d-4ced-93de-f1daa7523d52 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-56d120f0-341d-4ced-93de-f1daa7523d52 pre code { font-size: 14px !important; }css
body {
	color: #ffffff;
	font-family: 'Quicksand', sans-serif;
}
.wp-block-ug-code-block-1-1688e9a6-271b-4c81-871a-a7e7f6cc41fa { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-1688e9a6-271b-4c81-871a-a7e7f6cc41fa pre code { font-size: 14px !important; }javascript
bubbly({
  colorStart: '#d5d5d5',
  colorStop: '#d5d5d5',
  bubbles:400,
  blur:1,
  compose: 'source-over',
  bubbleFunc:() => `hsla(${200 + Math.random() * 50}, 100%, 50%, .3)`,
  angleFunc:() => Math.random() > 0.5 ? Math.PI : 2 * Math.PI,
  velocityFunc:() => 1 + Math.random() * 10,
  radiusFunc:() => Math.random() * 5
});

bubbly-bg Ex:7 Other compliated example 3

.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d { margin-top: 20px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-2204ffa2-1e1d-4fb7-8b3d-e6a223da250d pre code { font-size: 14px !important; }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>
.wp-block-ug-code-block-1-a9f16b95-90f6-4e51-8c75-f8d612b9493d { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-a9f16b95-90f6-4e51-8c75-f8d612b9493d pre code { font-size: 14px !important; }css
body {
	color: #484848;
	font-family: 'Quicksand', sans-serif;
}
.wp-block-ug-code-block-1-79ba6cd5-67e7-4a13-b6ae-19ad10e7ad43 { margin-top: 0px !important; margin-bottom: 20px !important; }.wp-block-ug-code-block-1-79ba6cd5-67e7-4a13-b6ae-19ad10e7ad43 pre code { font-size: 14px !important; }javascript
bubbly({
	colorStart: "#fff",
	colorStop: "#fff",
	blur: 1,
	bubbles: 220,
	compose: "source-over",
	shadowColor: "#5DB09B",
	radiusFunc: () => Math.random() * 15,
	bubbleFunc: () => `hsla(0, 0%, 80%, ${Math.random() * 0.25})`,
});
未分類