<html>
<head></head>
<body>
<div id="ambient" style="overflow:hidden; position:absolute; width:100%; height:100vh;"></div>
<!-- DEMO ONLY -->
<div class="card my-5 py-4 text-center" style=" margin-top: 150px !important; position: absolute; z-index: 9; width: 100%; background-color: transparent;border: 0px;">
<p style="margin: 0 auto;border: 1px solid #f0f0f0;background-color: rgba(255, 255, 255, 0.84);padding: 20px;border-radius: 12px;box-shadow: ;"><img style="max-width:500px; width:100%;margin-bottom: 11px;" src="https://raw.githubusercontent.com/BMSVieira/BVAmbient/main/demo-template/images/BV.png">
<br>
<a target="_blanK" href="https://github.com/BMSVieira/BVAmbient" class="btn btn-secondary">View on GitHub</a>
</p>
</div>
<!-- DEMO ONLY -->
</body>
</html>
html, body { width:100%; height:100vh; }
/* BVAmbient Style */
.bvambient_particle
{
position: absolute;
pointer-events: none;
transition: top linear, left linear;
}
/* Check External Source: bvambient.js */
document.addEventListener("DOMContentLoaded", function() {
var demo1 = new BVAmbient({
selector: "#ambient",
fps: 60,
max_transition_speed: 12000,
min_transition_speed: 8000,
particle_number: 30,
particle_maxwidth: 60,
particle_minwidth: 10,
particle_radius: 50,
particle_opacity: true,
particle_colision_change: true,
particle_background: "#58c70c",
particle_image: {
image: false,
src: ""
},
responsive: [
{
breakpoint: 768,
settings: {
particle_number: "15"
}
},
{
breakpoint: 480,
settings: {
particle_number: "10"
}
}
]
});
});
