bachir/ouatterrir-app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

background gradients refactoring

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi 2023-02-22 21:50:25 +01:00
parent 63589312a6
commit 8efc6fd6f9
2 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/main.scss
View File

@ -6,7 +6,7 @@
@import "./fonts/snap_it/snap_it.css";
body{
// background-color: $back;
background-color: $back;
}
#app{
@ -38,8 +38,12 @@ body{
#map-backgrounds{
.map-bg-canvas{
&.trame{
mix-blend-mode: multiply;
// filter: contrast(170%);
&.gradient{
// filter: blur(10px);
}
&.trame{
// display:none;
}
}

36
src/components/MapBackground.vue
View File

@ -52,21 +52,39 @@ export default {
}
console.log(gradients);
let custDir;
// switch (direction) {
// case 1:
// custDir = {
// x0: `${Math.random() * canvas.width}px`,
// y0: `-100px`,
// x1: `${Math.random() * canvas.width}px`,
// y1: `${canvas.height + 100}px`
// }
// break;
// case 2:
// custDir = {
// x0: `-100px`,
// y0: `${Math.random() * canvas.height}px`,
// x1: `${canvas.width + 100}px`,
// y1: `${Math.random() * canvas.height}px`
// }
// break;
// }
switch (direction) {
case 1:
custDir = {
x0: `${Math.random() * canvas.width}px`,
x0: `${Math.random() * canvas.width/3}px`,
y0: `-100px`,
x1: `${Math.random() * canvas.width}px`,
x1: `${canvas.width/3*2 + Math.random() * canvas.width/3}px`,
y1: `${canvas.height + 100}px`
}
break;
case 2:
custDir = {
x0: `-100px`,
y0: `${Math.random() * canvas.height}px`,
x1: `${canvas.width + 100}px`,
y1: `${Math.random() * canvas.height}px`
x0: `${canvas.width/3*2 + Math.random() * canvas.width/3}px`,
y0: `-100px`,
x1: `${Math.random() * canvas.width/3}px`,
y1: `${canvas.height + 100}px`
}
break;
}
@ -78,7 +96,7 @@ export default {
states : {
"default-state": {
gradients: gradients,
transitionSpeed: 60000
transitionSpeed: 20000 + Math.random() * 20000
}
},
})
@ -87,7 +105,7 @@ export default {
let h = !hue ? Math.floor(Math.random()*360) : hue + -30 + Math.floor(Math.random()*60);
let s = 40 + Math.floor(Math.random()*20);
let l = 40 + Math.floor(Math.random()*10);
let a = `${parseFloat(Math.random()*.9).toFixed(3)}`.slice(1);
let a = `${parseFloat(0.2 + Math.random()*.4).toFixed(3)}`.slice(1);
let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
// console.log(hsla);
return hsla;
@ -119,8 +137,8 @@ export default {
<template>
<canvas class="map-bg-canvas gradient" ref="canvas-background-gradient1"></canvas>
<canvas class="map-bg-canvas gradient" ref="canvas-background-gradient2"></canvas>
<canvas class="map-bg-canvas trame" ref="canvas-background-trame"></canvas>
<canvas class="map-bg-canvas gradient" ref="canvas-background-gradient2"></canvas>
</template>
<style lang="css" scoped>