clickspark.js
Version:
ClickSpark.js is a javascript utility that adds beautiful particle effects to your javascript events. Add image-files as single particles and configure where and when a particle fountain should be fired.
317 lines (277 loc) • 10.9 kB
HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ClickSpark.js</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<meta name="description" content="ClickSpark.js is a javascript utility that adds beautiful particle effects to your javascript
events.">
<!-- jQuery & Bootstrap -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script>
<!-- ClickSpark.js -->
<script type="text/javascript" src="../dist/clickspark.js"></script>
<!-- set example ClickSpark events -->
<script>
$(document).ready(function () {
$('.button-1').clickSpark();
$('.button-2').clickSpark({
particleImagePath: 'particle-2.png',
particleCount: 35,
particleSpeed: 10,
particleSize: 15,
particleRotationSpeed: 20,
animationType: 'explosion',
callback: ''
});
$('.button-3').clickSpark({
particleImagePath: 'particle-3.png',
particleCount: 55,
particleSpeed: 10,
particleSize: 24,
particleRotationSpeed: 5,
animationType: 'blowleft',
callback: function () {
$('.callbackDiv').animate({
opacity: 0,
}, 0, "linear", function () {
$('.callbackDiv').animate({
opacity: 1,
}, 200, "linear");
});
}
});
$('.button-4').click(function () {
clickSpark.setParticleCount(50);
clickSpark.setParticleSize(12);
clickSpark.setParticleSpeed(8);
clickSpark.setAnimationType('splash');
clickSpark.setParticleRotationSpeed(20);
clickSpark.setParticleImagePath('particle-4.png');
clickSpark.setCallback('');
clickSpark.fireParticles($('.sparklingDiv'));
});
});
</script>
<link href='http://fonts.googleapis.com/css?family=Lobster:400,300' rel='stylesheet'/>
<!-- just styles for this demo-page -->
<style>
html {
background-color: #FFF;
}
html, body {
height: 100%;
}
body {
font-size: 12px;
background: linear-gradient(to top, #ffffff 0%, #f2f2f2 100%);
}
.container {
padding-bottom: 100px;
}
h1, .navbar-brand {
font-family: Lobster;
}
h1 {
font-size: 48px;
}
.bg-info {
padding: 1px 0 15px 15px;
box-shadow: 0 2px 9px rgba(0, 0, 0, 0.3);
padding: 5px 0 20px 20px;
margin-top: 15px;
}
.text-primary {
min-height: 65px;
}
.sparklingDiv {
border: 1px solid grey;
height: 60px;
width: 100px;
}
.sparklingDivContainer {
position: absolute;
top: 22px;
right: 30px;
}
.navbar-default {
background-color: #303030;
background: linear-gradient(to top, #000000 0%, #303030 100%);
border-color: transparent;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.navbar {
border-radius: 0;
}
.callbackDiv {
border: 3px solid #449d44;
font-size: 10px;
line-height: 10px;
padding: 3px;
position: absolute;
right: 20px;
top: 50px;
width: 50%;
opacity: 0;
}
@media (max-width: 1199px) {
.callbackDiv, .sparklingDivContainer {
position: relative;
right: inherit;
top: 10px;
width: 90%;
}
}
@media (max-width: 767px) {
.callbackDiv, .sparklingDivContainer {
position: absolute;
right: 20px;
top: 10px;
width: 50%;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">ClickSpark.js</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="https://github.com/ymc-thzi/clickspark.js/archive/master.zip">download</a></li>
<li><a target="_blank" href="https://github.com/ymc-thzi/clickspark.js/blob/master/README.md">howTo</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h1>ClickSpark.js</h1>
<h4 class="text-muted">ClickSpark.js is a javascript utility that adds beautiful particle effects to your javascript
events.<br>
Add image-files as single particles and configure where and when a particle fountain should be fired.</h4>
<br/>
<br/>
<div class="row">
<div class="col-sm-3">
<h4 class="text-primary">Automatic click binding<br/>
<small>default particle effect</small>
</h4>
<div>Use jQuery to add ClickSpark to HTML-elements. On a click on the button-tag the default
sparkling effect will be fired.
</div>
</div>
<div class="col-sm-3">
<h4 class="text-primary">Automatic configured click binding<br/>
<small>customized particle effect</small>
</h4>
<div>Use jQuery to add ClickSpark to HTML-elements. Configure particle attributes for
example with particle rotation like this
</div>
</div>
<div class="col-sm-3">
<h4 class="text-primary">Automatic configured click binding<br/>
<small>customized particle effect with callback function</small>
</h4>
<div>Use jQuery to add ClickSpark to HTML-elements. Configure particle attributes for
example with a custom animation type like this and make a callback after animation is ready
</div>
</div>
<div class="col-sm-3">
<h4 class="text-primary">Independent particle binding<br/>
<small>customized particle effect</small>
</h4>
<div>Use jQuery to fire ClickSpark independently for example. The particles will be
targeted to the center position of the HTML-element with the className ".sparklingDiv".
So the particle target can be placed everywhere via CSS.<br><br/>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3 text-nowrap">
<code>$('.button-1').clickSpark();</code>
</div>
<div class="col-sm-3 text-nowrap">
<code>$('.button-2').clickSpark({<br/>
particleImagePath: '../particle-2.png',<br/>
particleCount: 35,<br/>
particleSpeed: 10,<br/>
particleSize: 15,<br/>
particleDuration: 400,<br/>
particleRotationSpeed: 20<br/>
});
</code>
</div>
<div class="col-sm-3 text-nowrap">
<code>$('.button-3').clickSpark({<br/>
particleImagePath: '../particle-3.png',<br/>
particleCount: 55,<br/>
particleSpeed: 10,<br/>
particleSize: 12,<br/>
particleRotationSpeed: 0,<br/>
animationType:'blowleft'<br/>
callback: function () {<br/>
$('.callbackDiv').show();<br/>
}<br/>
});
</code>
</div>
<div class="col-sm-3 text-nowrap">
<code>
$(document).ready(function () {<br/>
$('.button-4').click(function () {<br/>
clickSpark.fireParticles($('.sparklingDiv'));<br/>
});<br/>
});
</code>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="bg-info">
<h4 class="text-muted">DEMO</h4>
<button class="btn btn-default button-1">Click Me!</button>
</div>
</div>
<div class="col-sm-3">
<div class="bg-info">
<h4 class="text-muted">DEMO</h4>
<button class="btn btn-default button-2">Click Me!</button>
</div>
</div>
<div class="col-sm-3">
<div class="bg-info">
<h4 class="text-muted">DEMO</h4>
<button class="btn btn-default button-3">Click Me!</button>
<div class="bg-success callbackDiv">
callback func called:<br/> animation ready, follow href for example
</div>
</div>
</div>
<div class="col-sm-3">
<div class="bg-info">
<h4 class="text-muted">DEMO</h4>
<button class="btn btn-default button-4">Click Me!</button>
<div class="sparklingDivContainer">
target div
<div class="sparklingDiv"></div>
</div>
</div>
</div>
</div>
<a href="https://github.com/ymc-thzi/clickspark.js"><img alt="Fork me on GitHub"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"
style="position: absolute; top:0; right: 0; border: 0;"></a>
</div>
</body>
</html>