<!-- 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://cdn.matteobruni.it/images/particles/GitHub-Mark-120px-plus.png" alt="">
<span id="gh-project">Made with tsParticles</span>
</a>
<div>
<a class="github-button" href="https://github.com/matteobruni/tsparticles" data-icon="octicon-star" data-show-count="true" 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" data-show-count="true" aria-label="Fork matteobruni/tsparticles on GitHub">Fork</a>
<a class="github-button" href="https://github.com/matteobruni/tsparticles/releases/tag/tsparticles%401.28.0" data-icon="octicon-download" aria-label="Download matteobruni/tsparticles on GitHub">Download</a>
</div>
</div>
<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- tsparticles container ---- */
#tsparticles {
position: fixed;
width: 100%;
height: 100%;
}
.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;
}
//tsParticles library - https://github.com/matteobruni/tsparticles
tsParticles.load("tsparticles", {
backgroundMode: {
enable: true
},
fpsLimit: 60,
particles: {
number: {
value: 0
},
collisions: {
enable: false
},
color: {
value: "#ffffff"
},
shape: {
type: "circle"
},
opacity: {
value: 0.5,
random: false,
animation: {
enable: false,
speed: 1,
minimumValue: 0.1,
sync: false
}
},
size: {
value: 30,
random: {
enable: true,
minimumValue: 15
},
animation: {
enable: false,
speed: 40,
minimumValue: 0.1,
sync: false
}
},
links: {
enable: false
},
life: {
duration: {
sync: true,
value: 5
},
count: 1
},
move: {
enable: true,
gravity: {
enable: true
},
speed: 10,
direction: "none",
random: false,
straight: false,
outModes: {
bottom: "bounce",
default: "destroy",
top: "none"
},
trail: {
enable: true,
fillColor: "#000000",
length: 10
}
}
},
interactivity: {
detect_on: "canvas",
events: {
onHover: {
enable: false,
mode: "repulse",
parallax: {
enable: false,
force: 60,
smooth: 10
}
},
onClick: {
enable: true,
mode: "push"
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 0.8
},
repulse: {
distance: 200
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
detectRetina: true,
background: {
color: "#000"
},
emitters: {
direction: "top",
life: {
count: 0,
duration: 5,
delay: 2
},
rate: {
delay: 0.1,
quantity: 1
},
size: {
width: 0,
height: 0
},
particles: {
bounce: {
vertical: {
value: 0.8,
random: {
enable: true,
minimValue: 0.4
}
}
},
color: {
value: ["#5bc0eb", "#fde74c", "#9bc53d", "#e55934", "#fa7921"]
},
links: {
enable: false
},
opacity: {
value: 0.5
},
move: {
speed: 15,
random: false
}
}
}
});