🎨Vue Breathing Colors
Vue Breathing Colors is a vue directive used to change background color of any component in a "breathing like" manner.
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]
.
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
.
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 combined like
v-breathing-colors.random.hover
.For best result, always keep in mind that the
interval
should always be greater of at least200%
than thetransition.duration
. Say, thetransition.duration
is 1000, the minimuminterval
should be at least 2000.
More coming soon
More modifiers will be added for future versions.
Made with by Joff Tiquez
Last updated
Was this helpful?