Как я могу установить response-частиц-js в качестве фона при использовании React?
У меня уже все настроено, я просто не знаю, как заставить элемент, созданный реагирующими частицами, действовать как фон.
Вот код, который у меня есть:
import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import NavTabs from "./components/NavTabs";
import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Contact from "./components/pages/Contact";
import ParticlesContainer from "./components/ParticlesContainer";
function App() {
return (
<ParticlesContainer>
<Router>
<div>
<NavTabs />
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route path="/contact" component={Contact} />
</div>
</Router>
</ParticlesContainer>
);
}
export default App;
Тем не менее, ни один из контента не показывает; виден только элемент canvas, а остальные, похоже, вообще не отображаются.
РЕДАКТИРОВАТЬ: Вот код ParticleContainer:
import React, {Component} from 'react';
import Particles from 'react-particles-js';
class ParticlesContainer extends Component {
render() {
return (
<Particles
params={{
"particles": {
"number": {
"value": 150,
"density": {
"enable": true,
"value_area": 1803.4120608655228
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 2,
"color": "#000000"
},
"polygon": {
"nb_sides": 4
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.4008530152163807,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 1.5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 0,
"color": "#ffffff",
"opacity": 0.3687847739990702,
"width": 0.6413648243462091
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "window",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "bubble"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 100,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}} />
)
}
}
export default ParticlesContainer;
6 ответов
Заворачивая весь <Router /> внутри <ParticlesContainer /> совершенно неразумно, потому что ваш контейнер не отображает дочерних элементов. Отсюда и невидимое содержание.
я переехал <ParticlesContainer /> внутри <Router />, После этого это просто проблема CSS. Вот рекомендуемый рабочий пример: https://codesandbox.io/s/4k5z9xx0w. (Вы можете настроить стили по своему вкусу)
Что вы можете сделать в качестве альтернативы, так это явно отобразить детей, но это не нужно.
export default ({ children }) => (
<>
<Particles />
{children}
</>
);
Вы можете присвоить элементу имя класса и использовать его для определения абсолютной позиции, возможно, вы хотите сделать его важным, а затем выбрать высоту и ширину холста, как в следующем примере.
import Particles from 'react-particles-js'
class App extends Component{
render(){
return (
<Particles
canvasClassName="example"
height="120px"
width="300px"
params={{
polygon: {
enable: true,
type: 'inside',
move: {
radius: 10
},
url: 'path/to/svg.svg'
}
}} />
);
};
}
В вашем CSS
.example{
position:absolute !important;
}
Надеюсь, что это поможет вам
import Particles from 'react-particles-js';
class App extends Component {
render() {
return (
<div className="App">
<Particles className="particles"
params={particlesOptions}/>
<div
style={{
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%"
}}
>
<Header Data={Data}/>
</div>
</div>
);
}
}
export default App;
Ответ Мигеля хорош, но это привело к увеличению использования памяти для меня; для меня было практически невозможно прокручивать страницу с абсолютным холстом при использовании частиц в элементах в списке.
Что хорошо сработало для меня, так это размещение элемента частиц внутри абсолютно позиционированного:
<div style={{position: 'relative'}}>
<div style={{position: 'absolute'}}>
<Particles
params={{
particles: {
number: {
value: 50,
},
size: {
value: 3,
},
},
}}
/>
</div>
<div>
My actual content
</div>
<div>
Возможно, вам придется поиграть со стилем z-index, чтобы частицы оказались на заднем плане.
Может быть, вы захотите попробовать что-то подобное. Не забудьте добавить className, чтобы вы могли применять стили в своем CSS.
import Particles from 'react-particles-js';
function App() {
return (
<div className="App">
<OtherComponents/>
<OtherComponents/>
<Particles className="particles"
params={particlesOptions}/>
</div>
);
}
}
export default App;
Это входит в ваш файл CSS
.particles{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
Надеюсь, это пример, который поможет вам:
import React, { Component } from 'react';
import Particles from 'react-particles-js';
class DummyComponent extends Component {
render() {
return (
<Particles
params={{
"particles": {
"line_linked": {
"color":"#FFFFFF"
},
"number": {
"value": 150
},
"size": {
"value": 5
}
},
"interactivity": {
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
}
}
}
}}
style={{
width: '100%',
background: `#000000`
}}
/>
)}
}
export default DummyComponent;