jparticles
Version:
A succinct, efficient, and lightweight Canvas plugin library for building some cool particle effects.
63 lines (56 loc) • 1.97 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<style>
#instance-snow .demo {
background-color: #333;
}
</style>
</head>
<body>
<div id="root"></div>
<script src="../production/jparticles.all.js"></script>
<script>
var names = ['particle', 'wave', 'snow'];
var options = [{num: 100}];
var html = [];
for (var i = 0; i < names.length; i++) {
html.push(
'<div id="instance-'+ names[i] +'">' +
'<div class="demo"></div>' +
'<div class="btn-box">' +
'<button id="open'+ i +'" class="btn btn-primary" type="button">' +
'open' +
'</button>' +
'<button id="pause'+ i +'" class="btn btn-danger" type="button">' +
'pause' +
'</button>' +
'</div>' +
'</div>'
)
}
document.getElementById('root').innerHTML = html.join('');
for (var i = 0; i < names.length; i++) {
window['demo'+names[i]] = new JParticles[names[i]]('#instance-' + names[i] + ' .demo', options[i]);
document.getElementById('open'+i).onclick = function (i) {
return function () {
window['demo'+names[i]].open();
};
}(i);
document.getElementById('pause'+i).onclick = function (i) {
return function () {
window['demo'+names[i]].pause();
};
}(i);
}
window.demowave.setOptions({
offsetTop: 10,
opacity: 0.5,
speed: undefined
});
</script>
</body>
</html>