1 of 1

Vue Breathing Colors

Vue Breathing Colors is a vue directive used to change background color of any component in a "breathing like" manner.

Demo

Installation

Yarn

yarn add vue-breathing-colors

NPM

npm install vue-breathing-colors --save

CDN

<script scr="https://unpkg.com/vue-breathing-colors@<VERSION>/dist/vue-breathing-colors.js">

Usage

import Vue from 'vue';
import BreathingColors from 'vue-breathing-colors';

Vue.use(BreathingColors);

<!DOCTYPE html>
<html>
<head>
  <title>Breathing Colors</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
  <script src="https://unpkg.com/vue-breathing-colors@<VERSION>/dist/vue-breathing-colors.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    Vue.use(BreathingColors.default);
    var vm = new Vue({
      el: '#app'
    });
  </script>
</body>
</html>

Sample

Auto

The colors will change from array index 0 to array index n and back to 0 again.

HTML

<div v-breathing-colors="sample"></div>

JavaScript

export default {
  data() {
    return {
      sample: {
        colors: ['red', 'green', 'blue'],
        interval: 3000,
        transition: {
          duration: 1000
        }
      }
    }
  }
}

API

The main data needed by the directive is an object with 3 required fields colors:Array, intervale:Number, transition:[Object, duration:Number].

Modifiers

There 2 modifiers for this version, the hover and random.

Tips

Modifiers can be combined like v-breathing-colors.random.hover.
For best result, always keep in mind that the interval should always be greater of at least 200% than the transition.duration. Say, the transition.duration is 1000, the minimum interval should be at least 2000.

More coming soon

More modifiers will be added for future versions.

Vue Breathing Colors

Vue Breathing Colors is a vue directive used to change background color of any component in a "breathing like" manner.

Demo

Installation

Yarn

yarn add vue-breathing-colors

NPM

npm install vue-breathing-colors --save

CDN

<script scr="https://unpkg.com/vue-breathing-colors@<VERSION>/dist/vue-breathing-colors.js">

Usage

import Vue from 'vue';
import BreathingColors from 'vue-breathing-colors';

Vue.use(BreathingColors);

<!DOCTYPE html>
<html>
<head>
  <title>Breathing Colors</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
  <script src="https://unpkg.com/vue-breathing-colors@<VERSION>/dist/vue-breathing-colors.js"></script>
</head>
<body>
  <div id="app"></div>
  <script>
    Vue.use(BreathingColors.default);
    var vm = new Vue({
      el: '#app'
    });
  </script>
</body>
</html>

Sample

Auto

The colors will change from array index 0 to array index n and back to 0 again.

HTML

<div v-breathing-colors="sample"></div>

JavaScript

export default {
  data() {
    return {
      sample: {
        colors: ['red', 'green', 'blue'],
        interval: 3000,
        transition: {
          duration: 1000
        }
      }
    }
  }
}

API

The main data needed by the directive is an object with 3 required fields colors:Array, intervale:Number, transition:[Object, duration:Number].

Object

Type

Decription

Modifiers

There 2 modifiers for this version, the hover and random.

Modifier

Usage

Description

Tips

Modifiers can be combined like v-breathing-colors.random.hover.
For best result, always keep in mind that the interval should always be greater of at least 200% than the transition.duration. Say, the transition.duration is 1000, the minimum interval should be at least 2000.

More coming soon

More modifiers will be added for future versions.

Made with by Joff Tiquez