0.0.1 • Published 3 years ago
vue-gradient v0.0.1
A vue.js component to create multi radial-gradient backgrounds with animtions on color change.
Installation
npm install vue-gradient
Sample code
<template>
<div id="app">
<vue-gradient class="full" :colors="colors" />
</div>
</template>
<script>
import VueGradient from "vue-gradient";
export default {
name: "App",
components: {
VueGradient,
},
data() {
return {
colors: [
{
x: 0,
y: 0,
color_start: "rgb(255, 255,0,1)",
color_middle: "rgb(255, 255,0,0.25)", // optional
},
{
x: 100,
y: 0,
color_start: "rgb(0, 255,0,1)",
},
{
x: 0,
y: 50,
color_start: "rgb(255, 0,0,1)",
},
{
x: 0,
y: 100,
color_start: "rgb(0, 255,255,1)",
},
{
x: 100,
y: 100,
color_start: "rgb(255, 0,255,1)",
},
],
};
},
};
</script>
<style>
html,
body {
margin: 0;
padding: 0;
}
.full {
width: 100vw;
height: 100vh;
}
</style>Options
A list of the properties and what they are used for. The default values are bold
<vue-gradient :colors="colors"
transition-speed="0.3"
blend-mode="darken"
gradient-size="farthest-side"
middle-color-opaquer="-0.4"
>
CONTENT
</vue-gradient>| Property | Options | Description |
|---|---|---|
| transition-speed | 0.3, 0.5, 1, 2 | Speed of transition in seconds |
| blend-mode | normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity | CSS background blend mode. docs |
| gradient-size | closest-side, closest-corner, farthest-side, farthest-corner | Gradient size configuration. docs |
| middle-color-opaquer | -0.75 (Number) 0 ... -1 | Opacity level for color_middle, if no color_middle was set. docs |
| colors (required) | Array with color objects | Animated If the color data is changed, the new color setting will be animated in. See below |
Color object options:
| Property | Type | Description |
|---|---|---|
| x | Number | X position in percent |
| y | Number | Y position in percent |
| color_start | Color | Main color of gradient docs |
| color_middle (optional) | Color | Second color of gradient docs If unused, color_start with opacity will be used. |
Events
<vue-gradient v-on:change-start="onChangeStart" v-on:change-end="onChangeEnd" ... />| Property | Description |
|---|---|
| change-start | Color animation started |
| change-end | Color animation ended |
License
0.0.1
3 years ago