dynamicback v1.0.3

Dynamic Background

How to start

install the plugin

npm i dynamicback

use the plugin

/*main.js*/
import { createApp } from 'vue';
import App from './App.vue';
import dynamicBack from 'dynamicBack';

const app = createApp(App);

app.use(dynamicBack, {
  colorList: {
    /**
     * The color list you want to use, all the generated practicals will be selected from the list you 
     * defined, you could define as many as you want , but you could use only one color list in a 
     * single component 
    */
    lighter: ['#FBE7C6', '#B4F8C8', '#A0E7E5', '#FFAEBC'],
    darken: ['#050A30', '#000C66', '#0000FF', '#7EC8E3'],
    standard: ['#05445E', '#189AB4', '#75E6DA', '#D4F1F4'],
  },
});

app.mount('#app');

<!-- App.vue -->
<script setup></script>

<template>
  <div class="container">
    <dynamic-back v-colorList:standard></dynamic-back>
    <dynamic-back v-colorList:lighter></dynamic-back>
    <dynamic-back v-colorList:darken></dynamic-back>
  </div>
</template>

define the speed and number

You could define the specified speed for the animation and a specified number for the total number of the practitals.

how to define the speed and number

/*main.js*/
import { createApp } from 'vue';
import App from './App.vue';
import dynamicBack from 'dynamicBack';

const app = createApp(App);

app.use(dynamicBack, {
  colorList: {
    /**
     * The color list you want to use, all the generated practicals will be selected from the list you 
     * defined, you could define as many as you want , but you could use only one color list in a 
     * single component 
    */
    lighter: ['#FBE7C6', '#B4F8C8', '#A0E7E5', '#FFAEBC'],
    darken: ['#050A30', '#000C66', '#0000FF', '#7EC8E3'],
    standard: ['#05445E', '#189AB4', '#75E6DA', '#D4F1F4'],
  },
  /**
   * speed:The refreshing rate(milliseconds) suggest:>20
   * number:Total number of the practicals (number) suggest:>100
   * size:The max size of each practical(pixel) 
  */
  speed:40,
  number:150,
  size:50,
  /**
   * this argument will control the background color of the 
   * component, it should be a string
   */
  background:'transparent'
});

app.mount('#app');

<!-- App.vue -->
<template>
  <div class="container">
    <dynamic-back
      v-colorList:darken
      v-speed
      v-practicalNumber
      v-size
      v-background
    ></dynamic-back>
  </div>
</template>