I'd like to know how I can put the ParticleJS effect on a banner Parallax with a text in the div
center. This way:
Forexample,inthisbannerIwantedthatinthecenterofit,therewasatextandthattheimagewaswitheffectParalax.
Itriedthisway:
var canvasDiv = document.getElementById('particle-canvas');
var options = {
particleColor: '#fff',
interactive: true,
background: "assets/img/banner12.png",
speed: 'medium',
density: 'high'
};
var particleCanvas = new ParticleNetwork(canvasDiv, options);
.bgimg-1, .bgimg-2, .bgimg-3 {
position: relative;
opacity: 0.7;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("../assets/img/banner12.png");
min-height: 100%;
height: 500px;
width: 100%;
}
.business-header {
display: block !important;
height: 500px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.text-center{
text-align: center;
}
.lead{
letter-spacing: 7px;
text-align: justify;
text-justify: inter-word;
margin-bottom: 64px;
font-size: 16px;
}
.text-white {
color: #fff;
}
#particle-canvas {
width: 100%;
height: 100%;
}
<header class="business-header">
<div id="particle-canvas"></div>
<div class="bgimg-1" style="display: block">
<div class="container align-vertical">
<div class="row">
<div class="col-lg-12 col-md-12">
<br><br><br><br><br><br><br><br><br><br>
<h1 class="text-center text-white">Teste Titulo</h1>
<p class="lead text-white">Teste paragrafo</p>
</div>
</div>
</div>
</div>
</header>