vue-breathing-colors
v0.0.7
Published
Vue directive for breathing colors transition.
Readme
vue-breathing-colors
Vue Breathing Colors is a vue directive used to change background color of any component in a "breathing like" manner.
Installation
NPM
npm install vue-breathing-colors --save
Yarn
yarn add vue-breathing-colors
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>js
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 |
| ------ | ---- | ---------- |
| colors | Array | Array of string colors. E.g. #fff, #000000, red, rgb(), rgba().
| interval | Number (millis) | Interval indicates how often the color should change. |
| transition.duration | Number (millis) | The duration of transition timing. |
Modifiers
There 2 modifiers for this version, the hover and random.
| Modifier | Usage | Description |
| -------- | ----- | ----------- |
| random | v-breathing-colors.random | Using the random modifier will... you know, change the colors in random. |
| hover | v-breathing-colors.hover | Unlike the auto, hover will disrespect the inverval from the data object. The color will change in the auto order 0,1,2,3,etc.. but only when the onmouseover event was triggered. |
Tips
- Modifiers can be combibed like
v-breathing-colors.random.hover. - For best result, always keep in mind that the
intervalshould always be greater of at least200%than thetransition.duration. Say, thetransition.durationis 1000, the minimumintervalshould be at least 2000.
More coming soon
More modifiers will be added for future versions.
Made with :heart: by Jofferson Ramirez Tiquez