jQuery addClass example

Change class name on click in jQuery

by shelukhin89

HTML

<div class="smoke"></div>
<div class="txt"></div>

CSS

body {
  background: #000000;
  padding: 20px;
}
.smoke{
  width:100px;
  height:220px;
  border:1px solid rgba(255,255,255,0.1);
  position:relative;
}
.smoke > div{
  width:2px;
  height:1px;
  background-color:rgba(255,255,255,0.4);
  position:absolute;
  *box-shadow:0 0 10px 1px #ffffff;
  opacity:0;
}

.txt{
  color:#cccccc;
  padding:10px 0;
}

JavaScript

function randInt(min, max) {var rand = min + Math.random() * (max - min);rand = Math.round(rand);return rand;}

var s = $('.smoke');
var h = s.height();
var w = s.width();

function div(){
  var r1 = randInt(-15,15);
  var r2 = randInt(60,100);
  var r3 = randInt(3000,6000);
  var cx = w / 2 + w * r1 / 100;
  var cy = h * r2 / 100;

  dot(cx,cy,r3);
}

function dot(x,y,t){
	var m = 0;
  var tx = x;
  var op = 1;
  var p = y * 0.3;
  var r4 = randInt(-45,45);
  var r5 = randInt(50,150);
  for(var i=0; i<=y; i++){
  	var d = $('<div/>');
    if(i > p){
    	op = (100 - ((i - p) * 100 / (y - p))) / 100;
    }
    d.css({
      left:tx,
      bottom:i,
    });
    s.append(d);
    
    d.animate({opacity:0},m,'linear')
    	.animate({opacity:op},t*0.1,'linear')
      .animate({opacity:op},t*0.3,'linear')
      .animate({opacity:0},t*0.6,'linear',function(){
        $(this).remove();
      });
    
    tx = r4 * Math.sin(2.5 * i / r5) + x;
    //tx = x;
    m += t / y;
  }
}

div();
setInterval(div,1000);