Get Started
Install via NPM
npm i -S betterbacks
Include via CDN
https://cdn.jsdelivr.net/npm/betterbacks@0.0.0-beta.1/dist/betterbacks.js
Include via CDN(Minified)
https://cdn.jsdelivr.net/npm/betterbacks@0.0.0-beta.1/dist/betterbacks.min.js
Usage
// Import the library
import BetterBacks from 'betterbacks';
let settings = {
animate: true,
type: 'squircles',
density: 'low',
themeColor: '#32ffaa',
dark: true
};
BetterBacks('.target-class', settings);
// Note: Make sure you are calling the function after the DOM has been rendered
Betterback function takes two arguments.
can be a class, id or nested selector like '.example > div'.
{
animate: A boolean property which enables the animation of the background.
Values: true / false
Default: false
type: A string property which can be used to change the shapes of the background element.
Values: 'circles' / 'squares' / 'squircles'
Default: 'circles'
density: A string property which can be used to control the number of background elements rendered. Also, the size of the background elements are inversely proportional to density.
Values: 'low' / 'med' / 'high'
Default: 'med'
themeColor: A string property which is the theme color of the background.
Value: Can be any hex string like: ' #ff6060'
Default: '#729bff'
dark: A boolean property which can be used to change enable dark background elements on a lighter background in contrast to light elements on a dark background which is default.
Values: true / false
Default: false
}