Tengo instalado este react-particles-js, todo funciona bien como veo, pero ahora he creado un diseño personalizado y lo he asignado a la partícula a través de sus parámetros, así:
<Particles
params={{
particles: {
number: { value: 35, density: { enable: true, value_area: 800 } },
color: {
value: [
'BB4D10',
'#820E42',
'#BD740F',
'#248592',
'#5F4DAF',
'#8BA00F',
],
},
shape: {
type: 'circle',
stroke: { width: 0, color: '#000000' },
polygon: { nb_sides: 3 },
image: { src: 'img/github.svg', width: 100, height: 100 },
},
opacity: {
value: 1.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 9,
random: true,
anim: {
enable: false,
speed: 43.15684315684316,
size_min: 0.1,
sync: false,
},
},
line_linked: {
enable: true,
distance: 100.82952832645452,
color: '#ffffff',
opacity: 1.4,
width: 1,
},
move: {
enable: true,
speed: 2,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: { enable: false, rotateX: 600, rotateY: 1200 },
},
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: { enable: true, mode: 'bubble' },
onclick: { enable: false, mode: 'push' },
resize: true,
},
modes: {
grab: { distance: 400, line_linked: { opacity: 1 } },
bubble: {
distance: 109.63042366068159,
size: 13,
duration: 2,
opacity: 8,
speed: 3,
},
repulse: { distance: 200, duration: 0.4 },
push: { particles_nb: 4 },
remove: { particles_nb: 2 },
},
},
retina_detect: true,
}}
style={styling}
/>
Después de eso, estoy intentando agregar un color de fondo para que se vea correctamente, pero como puedo ver, el estilo que intento pasar a la partícula simplemente no funciona, al menos se aplica la posición.
const styling = {
backgroundColor: '#2a2e31',
position: 'absolute',
width: '10%',
};
------------------------------------
Hay varias formas de controlar el estilo:
Puede proporcionar una propiedad className para el contenedor del lienzo y una propiedad width para el ancho del lienzo:
<Particles
...
style={styling}
width="10%"
className="particles-wrapper"
/>
Y escribe el CSS:
.particles-wrapper {
background-color: #2a2e31;
height: 100%;
width: 10%; // You may need this or may not depending on your requirement
}
O bien, puede agregar un nuevo div que envuelva las <Partículas .. /> y establezca el estilo para este div ya que el lienzo predeterminado es transparente.
O bien, puedes usar el accesorio canvasClassName y establecer el estilo para esta clase.
Aquí hay una instantánea después de usar el primer método anterior:
La razón por la que necesitamos pasar el ancho y el alto por separado es que, como se ve en el código fuente, los presentes en props.style se sobrescriben de esta manera:
style={{
...this.props.style,
width,
height
}}
------------------------------------
La forma más sencilla de establecer un fondo para las partículas es utilizando la opción de fondo.
<Particles params={{
background: {
color: "#000"
},
/* all other options you set */
}} />
Esto hará retrocedersuelo a la lona. Si necesita uno transparente, utilice la respuesta @ajeet-shah.
