<!-- tsParticles container -->
<div id="tsparticles"></div>
<!-- https://github.com/matteobruni/tsparticles -->
<div class="github">
<a class="btn btn-link" href="https://github.com/matteobruni/tsparticles" title="Find more info on GitHub">
<img class="img-fluid" id="gh-mark" src="https://particles.js.org/images/GitHub-Mark-120px-plus.png" alt="">
<span id="gh-project">tsParticles</span>
</a>
<div>
<a class="github-button" href="https://github.com/matteobruni/tsparticles" data-icon="octicon-star" aria-label="Star matteobruni/tsparticles on GitHub">Star</a>
<a class="github-button" href="https://github.com/matteobruni/tsparticles/fork" data-icon="octicon-repo-forked" aria-label="Fork matteobruni/tsparticles on GitHub">Fork</a>
</div>
</div>
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
/* ---- reset ---- */
.github {
bottom: 10px;
right: 10px;
position: fixed;
border-radius: 10px;
background: #fff;
padding: 0 12px 6px 12px;
border: 1px solid #000;
}
.github a:hover,
.github a:link,
.github a:visited,
.github a:active {
color: #000;
text-decoration: none;
}
.github img {
height: 30px;
}
.github #gh-project {
font-size: 20px;
padding-left: 5px;
font-weight: bold;
vertical-align: bottom;
}
(async () => {
await loadColorUpdater(tsParticles);
await loadCircleShape(tsParticles);
await loadBaseMover(tsParticles);
await loadSizeUpdater(tsParticles);
await loadOpacityUpdater(tsParticles);
await loadOutModesUpdater(tsParticles);
await tsParticles.load("tsparticles", {
fpsLimit: 120,
background: {
color: "#000"
},
particles: {
color: { value: "#ffffff" },
move: {
direction: "none",
enable: true,
outModes: "out",
random: false,
speed: 2,
straight: false
},
number: { density: { enable: true, area: 800 }, value: 80 },
opacity: {
value: 0.5
},
shape: {
type: "circle"
},
size: {
value: { min: 1, max: 5 }
}
}
});
})();