BetterBacks

A small javascript tool to create random fascinating animated backgrounds on every page reload.

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


    Betterback function takes two arguments.

  • The first argument is your selector of the element,
    can be a class, id or nested selector like '.example > div'.
  • The second argument is settings, a Javascript object which is used to customize the background. See the below for properties.
  • The properties of the settings object are:
    {
    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
    }
// 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

Result