first draft of gradient+trame background
This commit is contained in:
parent
e1978d8e58
commit
0979917d25
11
package-lock.json
generated
11
package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"@csstools/normalize.css": "^12.0.0",
|
||||
"@material-design-icons/svg": "^0.14.2",
|
||||
"@mdi/font": "^7.1.96",
|
||||
"granim": "^2.0.0",
|
||||
"pinia": "^2.0.21",
|
||||
"vue": "^3.2.38",
|
||||
"vue-router": "^4.1.5"
|
||||
@ -1476,6 +1477,11 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/granim": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/granim/-/granim-2.0.0.tgz",
|
||||
"integrity": "sha512-aqa79K49ndjoUBtpYzlO8sKcuVQED+5axvX0SveqTLDR+Fa2G42AGntuQ36ysCFOWGVkWCLfHowFwk+D/9rGDg=="
|
||||
},
|
||||
"node_modules/grapheme-splitter": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
|
||||
@ -3531,6 +3537,11 @@
|
||||
"type-fest": "^0.20.2"
|
||||
}
|
||||
},
|
||||
"granim": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/granim/-/granim-2.0.0.tgz",
|
||||
"integrity": "sha512-aqa79K49ndjoUBtpYzlO8sKcuVQED+5axvX0SveqTLDR+Fa2G42AGntuQ36ysCFOWGVkWCLfHowFwk+D/9rGDg=="
|
||||
},
|
||||
"grapheme-splitter": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
"@csstools/normalize.css": "^12.0.0",
|
||||
"@material-design-icons/svg": "^0.14.2",
|
||||
"@mdi/font": "^7.1.96",
|
||||
"granim": "^2.0.0",
|
||||
"pinia": "^2.0.21",
|
||||
"vue": "^3.2.38",
|
||||
"vue-router": "^4.1.5"
|
||||
|
||||
@ -43,8 +43,6 @@ export default {
|
||||
<h1>
|
||||
<router-link :to="{ name: 'home' }">Où atterrir</router-link>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="row bottom">
|
||||
<StaticMenu/>
|
||||
<UserBlock/>
|
||||
</div>
|
||||
@ -61,7 +59,7 @@ export default {
|
||||
:concernement="concernements[0]"
|
||||
/> -->
|
||||
</MapConcernements>
|
||||
<div class="row">
|
||||
<div id="content" class="row">
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
$pad_btn: 0.5em;
|
||||
@mixin btn() {
|
||||
padding: $pad_btn;
|
||||
padding: $pad_btn/2 $pad_btn;
|
||||
border-radius: 5px;
|
||||
background-color: $btns_back;
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@ -19,12 +19,16 @@ html,body{
|
||||
|
||||
font-weight: normal;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column-reverse;
|
||||
// display: flex;
|
||||
// flex-flow: column-reverse;
|
||||
}
|
||||
|
||||
#header{
|
||||
flex: 0 0 auto;
|
||||
// flex: 0 0 auto;
|
||||
position: absolute;
|
||||
bottom:0;
|
||||
left:0;
|
||||
width: 100vw;
|
||||
padding: 1rem 0;
|
||||
>.row{
|
||||
@include layout-row();
|
||||
@ -32,16 +36,56 @@ html,body{
|
||||
}
|
||||
|
||||
#main-content{
|
||||
flex: 1 1 auto;
|
||||
// flex: 1 1 auto;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
// padding: 1rem 0;
|
||||
#map-concernements{
|
||||
|
||||
#map-backgrounds{
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top:0; left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
>canvas.map-bg-canvas{
|
||||
position: absolute;
|
||||
// z-index: -1;
|
||||
top:0; left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
#map-concernements{
|
||||
width:100%;
|
||||
height:100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
#map-nav{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top:0; left: 0;
|
||||
width:100vw;
|
||||
padding:1rem 0;
|
||||
>ul{
|
||||
@include layout-row();
|
||||
}
|
||||
}
|
||||
|
||||
>.row{
|
||||
@include layout-row();
|
||||
}
|
||||
|
||||
#content{
|
||||
position: absolute;
|
||||
top:0; right:0;
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ body{
|
||||
}
|
||||
|
||||
#app>header#header{
|
||||
background-color: $front;
|
||||
// background-color: $front;
|
||||
.row{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -26,10 +26,41 @@ body{
|
||||
font-family: "snap-it";
|
||||
}
|
||||
}
|
||||
&.bottom{
|
||||
padding:1em 0;
|
||||
// &.bottom{
|
||||
// padding:1em 0;
|
||||
|
||||
}
|
||||
// }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#main-content{
|
||||
|
||||
#map-backgrounds{
|
||||
.map-bg-canvas{
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
}
|
||||
|
||||
#map-concernements{
|
||||
|
||||
}
|
||||
|
||||
#map-nav{
|
||||
ul{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
gap: 1em;
|
||||
li{
|
||||
list-style: none;
|
||||
a{
|
||||
@include btn();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
136
src/components/MapBackground.vue
Normal file
136
src/components/MapBackground.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<script>
|
||||
|
||||
import Granim from 'granim'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
granim1: null,
|
||||
granim2: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initGradients()
|
||||
this.initTrame()
|
||||
},
|
||||
// computed: {
|
||||
// },
|
||||
// created () {
|
||||
// },
|
||||
methods: {
|
||||
initGradients () {
|
||||
let canvasBackground1 = this.$refs['canvas-background-gradient1'];
|
||||
canvasBackground1.width = canvasBackground1.parentElement.clientWidth;
|
||||
canvasBackground1.height = canvasBackground1.parentElement.clientHeight;
|
||||
|
||||
let gradients1 = [
|
||||
[
|
||||
{ color: this.getRandBGColor(), pos: .2 },
|
||||
{ color: this.getRandBGColor(), pos: .8 },
|
||||
{ color: this.getRandBGColor(), pos: 1 }
|
||||
], [
|
||||
{ color: this.getRandBGColor(), pos: 0 },
|
||||
{ color: this.getRandBGColor(), pos: .2 },
|
||||
{ color: this.getRandBGColor(), pos: .75 }
|
||||
],
|
||||
];
|
||||
console.log(gradients1);
|
||||
|
||||
this.granim1 = new Granim({
|
||||
element: canvasBackground1,
|
||||
direction: 'custom',
|
||||
customDirection: {
|
||||
x0: `${Math.random() * canvasBackground1.width}px`,
|
||||
y0: `-100px`,
|
||||
x1: `${Math.random() * canvasBackground1.width}px`,
|
||||
y1: `${canvasBackground1.height + 100}px`
|
||||
},
|
||||
isPausedWhenNotInView: true,
|
||||
states : {
|
||||
"default-state": {
|
||||
gradients: gradients1,
|
||||
transitionSpeed: 20000
|
||||
}
|
||||
},
|
||||
stateTransitionSpeed : 50000
|
||||
})
|
||||
|
||||
let canvasBackground2 = this.$refs['canvas-background-gradient2'];
|
||||
canvasBackground2.width = canvasBackground2.parentElement.clientWidth;
|
||||
canvasBackground2.height = canvasBackground2.parentElement.clientHeight;
|
||||
|
||||
let gradients2 = [
|
||||
[
|
||||
{ color: this.getRandBGColor(), pos: .2 },
|
||||
{ color: this.getRandBGColor(), pos: .8 },
|
||||
{ color: this.getRandBGColor(), pos: 1 }
|
||||
], [
|
||||
{ color: this.getRandBGColor(), pos: 0 },
|
||||
{ color: this.getRandBGColor(), pos: .2 },
|
||||
{ color: this.getRandBGColor(), pos: .75 }
|
||||
],
|
||||
];
|
||||
console.log(gradients2);
|
||||
|
||||
this.granim2 = new Granim({
|
||||
element: canvasBackground2,
|
||||
customDirection: {
|
||||
x0: `-100px`,
|
||||
y0: `${Math.random() * canvasBackground2.height}px`,
|
||||
x1: `${canvasBackground2.width + 100}px`,
|
||||
y1: `${Math.random() * canvasBackground2.height}px`
|
||||
},
|
||||
isPausedWhenNotInView: true,
|
||||
states : {
|
||||
"default-state": {
|
||||
gradients: gradients2,
|
||||
transitionSpeed: 20000
|
||||
}
|
||||
},
|
||||
stateTransitionSpeed : 50000
|
||||
})
|
||||
|
||||
},
|
||||
getRandBGColor () {
|
||||
let h = Math.floor(Math.random()*360);
|
||||
let s = 40 + Math.floor(Math.random()*40);
|
||||
let l = 40 + Math.floor(Math.random()*20);
|
||||
let a = `${parseFloat(Math.random()*.9).toFixed(3)}`.slice(1);
|
||||
let hsla = `hsla(${h}, ${s}%, ${l}%, ${a})`;
|
||||
console.log(hsla);
|
||||
return hsla;
|
||||
},
|
||||
initTrame () {
|
||||
let canvasBackgroundTrame = this.$refs['canvas-background-trame'];
|
||||
canvasBackgroundTrame.width = canvasBackgroundTrame.parentElement.clientWidth;
|
||||
canvasBackgroundTrame.height = canvasBackgroundTrame.parentElement.clientHeight;
|
||||
let ctx = canvasBackgroundTrame.getContext('2d');
|
||||
|
||||
let step = 1;
|
||||
for (let i = 0; i < parseInt(canvasBackgroundTrame.width); i+=step) {
|
||||
for (let j = 0; j < parseInt(canvasBackgroundTrame.height); j+=step) {
|
||||
if (Math.random() > 0.95) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(i, j, 0.5, 0, 2 * Math.PI, false);
|
||||
ctx.fillStyle = "rgba(125,125,125,0.8)";
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
|
||||
</style>
|
||||
@ -1,12 +1,14 @@
|
||||
<script>
|
||||
|
||||
import Granim from 'granim'
|
||||
// import { mapActions, mapState } from 'pinia'
|
||||
import { computed } from 'vue'
|
||||
// import LoginBlock from '@components/block/LoginBlock.vue'
|
||||
// import UserTools from '@components/block/UserTools.vue'
|
||||
import MapBackground from '@components/MapBackground.vue'
|
||||
|
||||
// import MA from '/api/ma-axios'
|
||||
|
||||
|
||||
// https://www.digitalocean.com/community/tutorials/vuejs-vue-html5-canvas
|
||||
|
||||
export default {
|
||||
@ -16,7 +18,9 @@ export default {
|
||||
canvas: null,
|
||||
ctx: null
|
||||
},
|
||||
animateEvent: new Event('animate')
|
||||
animateEvent: new Event('animate'),
|
||||
granim: null
|
||||
|
||||
}
|
||||
},
|
||||
provide() {
|
||||
@ -45,16 +49,44 @@ export default {
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
},
|
||||
components: {
|
||||
MapBackground
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="map-backgrounds">
|
||||
<MapBackground />
|
||||
</div>
|
||||
<div id="map-concernements">
|
||||
<canvas ref="canvas-map"></canvas>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<nav id="map-nav">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#terraindevie">terrain de vie</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#proximite">proximité</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#superposition">superposition</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#puissancedagir">puissance d'agir</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#action">action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#doleancer">doléancer</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="css" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user