You cannot 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
2.4 KiB
Vue
130 lines
2.4 KiB
Vue
<template>
|
|
<div class="particle-network-animation">
|
|
<canvas ref="pna" ></canvas>
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { ParticleNetworkAnimation } from '../ParticleNetworkAnimation';
|
|
|
|
export default {
|
|
name: 'BannerWrapperNetwork',
|
|
props: {
|
|
options: {
|
|
type: Object,
|
|
default: () => ({
|
|
velocity: 0.5, // the higher the faster
|
|
density: 30000, // the lower the denser
|
|
netLineDistance: 120,
|
|
netLineColor: '#ccc',
|
|
particleColors: ['#ccc']
|
|
}),
|
|
},
|
|
},
|
|
data: () => ({
|
|
animation: null,
|
|
}),
|
|
mounted() {
|
|
setTimeout(() =>
|
|
this.animation = new ParticleNetworkAnimation(this.$refs.pna, this.options
|
|
), 200);
|
|
},
|
|
updated() {
|
|
this.animation?.forceUpdate();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.particle-network-animation {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
box-shadow: var(--shadow200);
|
|
|
|
&.white{
|
|
background-color: #fff;
|
|
}
|
|
&.no-shadow{
|
|
box-shadow: none;
|
|
}
|
|
|
|
&::before {
|
|
z-index: -2;
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
opacity: 0.2;
|
|
}
|
|
canvas{
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
.wrapper{
|
|
//pointer-events: none;
|
|
}
|
|
}
|
|
.glow {
|
|
z-index: -1;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
|
|
}
|
|
$duration: 25s;
|
|
.glow-1 {
|
|
width: 150vw;
|
|
height: 150vh;
|
|
margin-top: -75vh;
|
|
margin-left: -75vw;
|
|
animation: glow-1-move $duration linear infinite both;
|
|
}
|
|
@keyframes glow-1-move {
|
|
from {
|
|
transform: translate(-100%, 100%);
|
|
}
|
|
to {
|
|
transform: translate(100%, -100%);
|
|
}
|
|
}
|
|
.glow-2 {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
margin-top: -50vh;
|
|
margin-left: -50vw;
|
|
animation: glow-2-move $duration linear $duration / 3 infinite both;
|
|
}
|
|
@keyframes glow-2-move {
|
|
from {
|
|
transform: translate(-100%, 0%);
|
|
}
|
|
to {
|
|
transform: translate(100%, 100%);
|
|
}
|
|
}
|
|
.glow-3 {
|
|
width: 120vw;
|
|
height: 120vh;
|
|
margin-top: -60vh;
|
|
margin-left: -60vw;
|
|
animation: glow-3-move $duration linear $duration / 3 * 2 infinite both;
|
|
}
|
|
@keyframes glow-3-move {
|
|
from {
|
|
transform: translate(100%, 100%);
|
|
}
|
|
to {
|
|
transform: translate(0%, -100%);
|
|
}
|
|
}
|
|
</style> |