0.1.1 • Published 5 years ago
bubble-bg v0.1.1
Bubble BG
About
Bubble BG is a web component based on bubbly-bg library. It allows add background with animated bubbles to your site.
How to Install
First, install the library in your project by npm:
$ npm install bubble-bg
Or Yarn:
$ yarn add bubble-bg
Getting Started
Connect libary with project using script tag in HTML:
<script type="module" src="/path/to/bubble-bg.js"></script>
ES6 import:
import 'bubble-bg';
Props
Name | Type | Default | Description | Available options |
---|---|---|---|---|
animateBubbles | boolean | true | Enable or disable bubbles animation | true - enable, false - disable |
shadowBlur | number | 4 | Canvas shadowBlur value | e.g: 1 |
bubblesCount | number | 20 | Number of bubbles | e.g: 63 |
colors | string[] | ["#2ae", "#17b"] | Background gradient stops colors | e.g: ["#4287f5", "#4248f5" ,"#f542a7"] |
compose | string | lighter | Canvas compose value | lighter or |
shadowColor | string | #fff | e.g: rgb() , #f0f0f0 | |
gradientAngle | number | 45 | Background gradient angle direction | values between 0 and 360 |
Example
With default props:
<body>
<bubble-bg></bubble-bg>
</body>
With custom props:
<body>
<bubble-bg
shadowColor="#fefefe"
bubblesCount="34"
></bubble-bg>
</body>
License
This project is licensed under the GPL 3.0 License © 2019-present Jakub Biesiada