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.
122 lines
2.2 KiB
Vue
122 lines
2.2 KiB
Vue
2 years ago
|
<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']
|
||
|
}),
|
||
|
},
|
||
|
},
|
||
|
mounted(){
|
||
|
new ParticleNetworkAnimation(this.$refs.pna, this.options);
|
||
|
},
|
||
|
};
|
||
|
</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>
|