Replies: 1 comment
-
You are loading only For example: And load it calling it like this: It can be called before the |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi !
I'm currently developping my website with Laravel (10) and i'm struggling integrating TSParticles...
I'm using Laravel mix too.
Unfortunately, my particles are not showing up... But the background does change with the options here's my config and my code :
Webpack Mix :
My view :
//Head
<script src="{{ mix('js/particles.js') }}"></script>
//Body
<div id="tsparticles"></div>
My js file (particles.js) :
` import './bootstrap';
import { tsParticles } from "tsparticles-engine";
const options = {
background: {
color: "#000", // the canvas background color
},
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: "#ffffff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000"
},
polygon: {
nb_sides: 5
},
// image: {
// src: "img/github.svg",
// width: 100,
// height: 100
// }
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
},
size: {
value: 10,
random: true,
anim: {
enable: false,
speed: 80,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 300,
color: "#ffffff",
opacity: 0.4,
width: 2
},
move: {
enable: true,
speed: 12,
direction: "none",
random: false,
straight: false,
out_mode: "out",
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
};
document.addEventListener('DOMContentLoaded', function () {
tsParticles.load("tsparticles", options);
}); `
Any suggestions on why this is not working ? Google didn't help me...
Thank you !
Beta Was this translation helpful? Give feedback.
All reactions