jparticles
Version:
A succinct, efficient, and lightweight Canvas plugin library for building some cool particle effects.
188 lines (175 loc) • 6.46 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
<style>
[id^="instance"] {
position: relative;
}
[id^="progress"] {
width: 100%;
height: 600px;
line-height: 600px;
text-align: center;
font-size: 50px;
color: #333;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="instance4">
<div class="demo"></div>
<div class="btn-box">
<button class="btn btn-primary" type="button" data-open>
start/open
</button>
<button class="btn btn-danger" type="button" data-pause>
pause
</button>
</div>
<div id="progress4">0%</div>
</div>
<div id="instance5">
<div class="demo"></div>
<div class="btn-box">
<button class="btn btn-primary" type="button" data-open>
start/open
</button>
<button class="btn btn-danger" type="button" data-pause>
pause
</button>
</div>
</div>
<script src="../production/jparticles.js"></script>
<script src="../production/wave.js"></script>
<script>
function getCss(elem, prop) {
if(window.getComputedStyle) {
return getComputedStyle(elem, false)[prop];
} else if(elem.currentStyle) {
return elem.currentStyle[prop];
}
}
(function () {
var instance = document.querySelector('#instance4');
var demo = instance.querySelector('.demo');
var btnOpen = instance.querySelector('.btn[data-open]');
var btnPause = instance.querySelector('.btn[data-pause]');
var progressElem = document.querySelector('#progress4');
var elemHeight = parseInt(getCss(demo, 'height')) - 8;
var progress = elemHeight;
var timer = null;
function setProgress() {
var percent = ( (elemHeight - progress) / elemHeight * 100 ).toFixed();
progressElem.innerHTML = percent + '%';
if (percent > 55) {
progressElem.style.color = '#fff';
} else {
progressElem.removeAttribute('style');
}
}
// 一条
function run() {
if (progress <= 0) {
progress = 0;
effect.pause();
clearInterval(timer);
} else {
progress -= 4;
effect.open();
}
effect.setOptions({
offsetTop: progress
});
setProgress();
}
var effect = new JParticles.wave(demo, {
num: 1,
line: false,
fill: true,
fillColor: '#27C9E5',
crestHeight: 8,
offsetTop: progress,
rippleNum: 3,
speed: .3
});
btnOpen.addEventListener('click', function () {
if (progress === 0) {
progress = elemHeight;
}
clearInterval(timer);
timer = setInterval(function () {
run();
}, 30);
});
btnPause.addEventListener('click', function () {
clearInterval(timer);
});
})();
(function () {
var instance = document.querySelector('#instance5');
var demo = instance.querySelector('.demo');
var btnOpen = instance.querySelector('.btn[data-open]');
var btnPause = instance.querySelector('.btn[data-pause]');
var elemHeight = parseInt(getCss(demo, 'height')) - 8;
var originOffsetTop = [elemHeight, elemHeight + 8, elemHeight + 16];
var progress = JParticles.utils.extend([], originOffsetTop);
var originOffsetLeft = [2, 1, 0];
var offsetLeft = JParticles.utils.extend([], originOffsetLeft);
var timer = null;
// 多条和多参数设置
function run() {
if (progress[1] <= 0) {
progress.forEach(function(item, i, array) {
array[i] = 0;
});
effect.pause();
clearInterval(timer);
} else {
progress.forEach(function(item, i, array) {
array[i] = item - 4;
});
offsetLeft.forEach(function(item, i, array) {
array[i] = item - 0.5;
});
effect.open();
}
effect.setOptions({
offsetTop: progress,
offsetLeft: offsetLeft,
opacity: 0.5,
speed: undefined
});
}
var effect = new JParticles.wave(demo, {
num: 3,
lineColor: ['rgba(0, 190, 112, .5)', 'rgba(0, 190, 112, .7)', 'rgba(0, 190, 112, .9)'],
lineWidth: [.5, .7, .9],
offsetLeft: offsetLeft,
offsetTop: progress,
crestHeight: [8, 12, 16],
rippleNum: 2,
speed: .07
});
btnOpen.addEventListener('click', function () {
if (progress[1] <= 0) {
progress = JParticles.utils.extend([], originOffsetTop);
offsetLeft = JParticles.utils.extend([], originOffsetLeft);
}
clearInterval(timer);
timer = setInterval(function () {
run();
}, 30);
});
btnPause.addEventListener('click', function () {
clearInterval(timer);
});
})();
</script>
</body>
</html>