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

36
src/components/MapBackground.vue
View File

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