devcut / interactive-board Goto Github PK

View Code? Open in Web Editor NEW

Interactive board is the lightweight plugin to offer mouse interaction with your users. :bookmark::flashlight:

License: MIT License

CSS 3.15% JavaScript 93.79% SCSS 3.05%

interactive-board's Introduction

Interactive Board 🔖🔦

Interactive board is the lightweight (without dependencies) plugin to offer mouse interaction with your users.

Getting started | Documentation | Demos

Getting started ⬇️

Download

With yarn

yarn add devcut/interactive-board

With CDN

<script src="https://cdn.jsdelivr.net/npm/interactive-board/lib/interactive-board.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-board/lib/interactive-board.min.css">

or manual download.

Installation

3 possibilities to install the plugin :

import
require
or by file include

Import

import InteractiveBoard from 'interactive-board';

Require

const InteractiveBoard = require('interactive-board');

File include

Link interactive-board.min.js in your HTML :

<script src="interactive-board.min.js"></script>

Styles

Link interactive-board.min.css in your CSS :

<link rel="stylesheet" href="interactive-board.min.css">

Documentation 📃

Basic usage

Add this div in your html template

<div class="interactive-board"></div>

Call init function to start the process

let ib = new InteractiveBoard({});

ib.init();

Configuration

You can change the default configuration :

let ib = new InteractiveBoard({
    board: {
        element: '.interactive-board', // Selector of board
        width: '100%', // Default width
        height: '100vh', // Default height
        background: '#000000' // Default background
    },

    // Change color of random shape
    activateRandomShape: {
        enabled: true,
        time: 200, // Interval before change color of another shape
        duration: 3000 // Duration of color 
    },

    colors: [], // Set here (in hex) different colors of boards. If array is empty, random color is choiced
    
    shape: {
        width: 18, // Default width of each shape
        height: 18, // Default height of each shape
        margin: 2, // Default margin
        background: '#1d1d1d' // Default color of shapes
    },

    // When user click on any shape, make a little pulse
    pulse: {
        enabled: true
    }
});

ib.init();