Skip to content

Instantly share code, notes, and snippets.

@tracend tracend/.readme.md
Last active Jan 25, 2016

Embed
What would you like to do?
CSS particles
<html>
<head>
<link href="particles.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript">
// THE MAIN SCRIPT, TO GENERATE AN EXPLOSION ON MOUSE CLICK
$(document).ready(function() {
$(document).on('touchstart click', function(e) {
var xClick = e.clientX;
var yClick = e.clientY;
$("body").explosion({
origin:{
x:xClick,
y:yClick
},
particleClass:"particle"
});
});
});
</script>
<style>
body{
background-color:black
}
</style>
</head>
<body>
</body>
</html>
.particle {
width:8px;
height:8px;
background-color:red;
-webkit-transition: 1s ease;
-moz-transition: 1s ease;
-o-transition: 1s ease;
-ms-transition: 1s ease;
transition: 1s ease;
}
(function($){
$.fn.explosion = function(options){
var settings = $.extend({
particleClass: "particle",
origin: {x:0,y:0},
particles: 50,
radius: 100,
complete: function() {}
},options);
return this.each(function() {
for(i=0;i<settings.particles;i++){
var particle = $("<div />").addClass(settings.particleClass);
$(particle).css("position","absolute");
// add a particle
$(this).append($(particle));
// offset from center
$(particle).offset({
top:settings.origin.y-$(particle).height()/2,
left:settings.origin.x-$(particle).width()/2
});
// css animation
var pos = {
x: (Math.floor(Math.random()*settings.radius)-settings.radius/2),
y: (Math.floor(Math.random()*settings.radius)-settings.radius/2),
z: (Math.floor(Math.random()*settings.radius)-settings.radius/2)
};
var duration = (Math.floor(Math.random()*1000)+1000)/1000;
$(particle).css(
{
'-webkit-transition-duration': duration +"s",
'-o-transition-duration': duration +"s",
'-ms-transition-duration': duration +"s",
'-moz-transition-duration': duration +"s",
'transition-duration': duration +"s",
'-webkit-transform': "translate3d("+ pos.x +"px,"+ pos.y +"px,"+ pos.z +"px)",
'-o-transform': "translate3d("+ pos.x +"px,"+ pos.y +"px,"+ pos.z +"px)",
'-ms-transform': "translate3d("+ pos.x +"px,"+ pos.y +"px,"+ pos.z +"px)",
'-moz-transform': "translate3d("+ pos.x +"px,"+ pos.y +"px,"+ pos.z +"px)",
'transform': "translate3d("+ pos.x +"px,"+ pos.y +"px,"+ pos.z +"px)",
'opacity': 0
}
);
$(particle).on('transitionend webkitTransitionEnd oTransitionEnd', function () {
$(this).remove();
});
}
settings.complete.call(this);
});
};
}(jQuery));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.