You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.9 KiB
130 lines
3.9 KiB
<template>
|
|
<div>
|
|
<div class="backgrounds">
|
|
<canvas id="canvas__bg" width="32" height="32"></canvas>
|
|
<div class="overlay gradient"></div>
|
|
<div class="overlay vignette"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
R1: { default: 130 },
|
|
R2: { default: 64 },
|
|
G1: { default: 0 },
|
|
G2: { default: 64 },
|
|
B1: { default: 250 },
|
|
B2: { default: 64 },
|
|
},
|
|
methods: {
|
|
moveGradient: function() {
|
|
let self = this;
|
|
var c = document.getElementById("canvas__bg");
|
|
var $ = c.getContext("2d");
|
|
|
|
var col = function(x, y, r, g, b) {
|
|
$.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
|
|
$.fillRect(x, y, 1, 1);
|
|
};
|
|
|
|
var R = function(x, y, t) {
|
|
return Math.floor(
|
|
parseInt(self.$props.R1) +
|
|
parseInt(self.$props.R2) *
|
|
Math.cos((x * x - y * y) / 300 + t));
|
|
};
|
|
var G = function(x, y, t) {
|
|
return Math.floor(
|
|
parseInt(self.$props.G1) +
|
|
parseInt(self.$props.G2) *
|
|
Math.sin(
|
|
(x * x * Math.cos(t / 4) + y * y * Math.sin(t / 3)) / 300
|
|
)
|
|
);
|
|
};
|
|
var B = function(x, y, t) {
|
|
return Math.floor(
|
|
parseInt(self.$props.B1) +
|
|
parseInt(self.$props.B2) *
|
|
Math.sin(
|
|
5 * Math.sin(t / 9) +
|
|
((x - 100) * (x - 100) + (y - 100) * (y - 100)) / 1100
|
|
)
|
|
);
|
|
};
|
|
|
|
var t = 0;
|
|
|
|
var run = function() {
|
|
for (let x = 0; x <= 35; x++) {
|
|
for (let y = 0; y <= 35; y++) {
|
|
col(x, y, R(x, y, t), G(x, y, t), B(x, y, t));
|
|
}
|
|
}
|
|
t = t + 0.03;
|
|
window.requestAnimationFrame(run);
|
|
};
|
|
(function() {
|
|
setTimeout(function() {
|
|
run(); // canvas background animation
|
|
}, 100);
|
|
})();
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.moveGradient();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#canvas__bg,
|
|
.overlay {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.backgrounds {
|
|
position: fixed;
|
|
z-index: -1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.overlay.gradient {
|
|
background: #17a2b8;
|
|
/* Old browsers */
|
|
// background: -moz-linear-gradient( -45deg, #310089 0%, #5b007c 100%);
|
|
/* FF3.6-15 */
|
|
// background: -webkit-linear-gradient( -45deg, #310089 0%, #5b007c 100%);
|
|
/* Chrome10-25,Safari5.1-6 */
|
|
background: linear-gradient(135deg, #000 0%, #ee3552 100%);
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17a2b8', endColorstr='#ee3552', GradientType=1);
|
|
/* IE6-9 fallback on horizontal gradient */
|
|
opacity: 0.59;
|
|
}
|
|
|
|
.overlay.vignette {
|
|
// background: -moz-radial-gradient( center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
|
|
/* FF3.6-15 */
|
|
// background: -webkit-radial-gradient( center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
|
|
/* Chrome10-25,Safari5.1-6 */
|
|
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, #000000 100%);
|
|
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
|
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000', GradientType=1);
|
|
/* IE6-9 fallback on horizontal gradient */
|
|
opacity: 0.6;
|
|
transition: opacity 4s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
|
|
-webkit-transition: opacity 4s cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
|
|
}
|
|
</style>
|