سلام، اینم یه افکت زیبای جاوا اسکریپت، افکت حباب های رنگی

[ATTACH=CONFIG]360[/ATTACH]

<style>
html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
	
  overflow: hidden;
  background: #171819;
	-webkit-transform: translate3d(0,0,0);
}</style>
</head>

  <script>
    window.open    = function() {};
    window.alert   = function() {};
    window.print   = function() {};
    window.prompt  = function() {};
    window.confirm = function() {};
  </script>

  <script>
if (window !== window.top && window.top.__stop_animations !== false) {
  window.is_webkit = /(webkit)[ \/]([\w.]+)/.exec(window.navigator.userAgent.toLowerCase())

  window.max_timer = window.is_webkit ? 90 : 90
  var pauseCSSAnimations = function() {

    var stopCSSAnimations = function() {
      var body = document.getElementsByTagName('body')[0];
      body.addEventListener('webkitAnimationStart', stopAnimation, false);
      body.addEventListener('webkitAnimationIteration', stopAnimation, false);
      body.addEventListener('animationstart', stopAnimation, false);
      body.addEventListener('animationiteration', stopAnimation, false);
    };

 
    var stopAnimation = function(e) {
      var target_el = e.target;
      var e_type = e.type.toLowerCase();
      
      if (e_type.indexOf('animationstart') !== -1 || e_type.indexOf('animationiteration') !== -1) {

        setTimeout(false, function() {

          if (target_el.style.webkitAnimationPlayState !== 'paused')
            target_el.style.webkitAnimationPlayState = 'paused';

          if (target_el.style.MozAnimationPlayState !== 'paused')
            target_el.style.MozAnimationPlayState = 'paused';

          if (target_el.style.animationPlayState !== 'paused')
            target_el.style.animationPlayState = 'paused';

        }, window.max_timer);
      }
    }

    stopCSSAnimations();

  };

  var pauseJSAnimations = function() {

    window.setInterval = (function(oldSetInterval) {
      var registered = [];

      var f = function() {
        var id;
        var $this = this;
        var args = arguments;
        if (typeof args[0] !== 'function' && args[0] === false) {
          args = Array.prototype.slice.call(arguments);
          args = args.slice(1);

          id = oldSetInterval.apply($this, args)
        }
        else {
          id = oldSetInterval.apply($this, args);
          registered.push(id);
        }

        return id;
      };

      f.clearAll = function() {
        var r;
        while (r = registered.pop()) {
          clearInterval(r);
        }
      };

      return f;
    })(window.setInterval);

    window.setTimeout = (function(oldSetTimeout) {
      var registered = [];

      var f = function() {
        var id;
        var $this = this;
        var args = arguments;
        if (typeof args[0] !== 'function' && args[0] === false) {
          args = Array.prototype.slice.call(arguments);
          args = args.slice(1);
          id = oldSetTimeout.apply($this, args)
        }
        else {
          id = oldSetTimeout.apply($this, args);
          registered.push(id);
        }

        return id;
      };

      f.clearAll = function() {
        var r;
        while (r = registered.pop()) {
          clearTimeout(r);
        }
      };

      return f;
    })(window.setTimeout);

    setTimeout(false, function() {
      setTimeout.clearAll();
      setInterval.clearAll();
    }, window.max_timer);


    window.__requestAnimFrame = window.requestAnimationFrame || undefined;
    window.__cancelAnimFrame = window.cancelAnimationFrame || undefined;
    window.__vendors = ['webkit', 'moz', 'ms', 'o'];
    window.__registered_rafs = [];

    window.__requestFrame = function(cb) {
      if (!window.__requestAnimFrame) return;

      var req_id = window.__requestAnimFrame(cb);
      __registered_rafs.push(req_id);

      return req_id;
    };

    if (!window.__requestAnimFrame) {
      for(var x = 0; x < window.__vendors.length; x++) {
          if (!window.__requestAnimFrame) {
            window.__requestAnimFrame = window[window.__vendors[x]+'RequestAnimationFrame'];
            window[window.__vendors[x]+'RequestAnimationFrame'] = __requestFrame;
          }

          if(!window.__cancelAnimFrame) {
            window.__cancelAnimFrame = window[window.__vendors[x]+'CancelAnimationFrame'] ||
                                        window[window.__vendors[x]+'CancelRequestAnimationFrame'];
          }
      }
    }

    setTimeout(false, function() {
      if (!window.__requestAnimFrame) return;
      
      var r;
      while (r = window.__registered_rafs.pop()) {
        window.__cancelAnimFrame(r);
      }
    }, window.max_timer);

  };

  if (window !== window.top)
    pauseJSAnimations();

  var __pauseAnimations = function() {
    if (window !== window.top)
      pauseCSSAnimations();
  };
}
else {
  __pauseAnimations = function() {};
}
  </script>
<title>Pakhshe Nur Ba Mouse - softafzar.net</title>
</head>

<canvas id="canvas"></canvas>

<script>
function polyfillRequestAnimFrame (window) {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame =
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); },
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };

    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}
polyfillRequestAnimFrame(window);


var canvas = document.getElementById('canvas'),
		ctx = canvas.getContext('2d'),
		window_width = window.innerWidth,
		window_height = window.innerHeight;

canvas.width = window_width;
canvas.height = window_height;

var $$ = {
	// Get a random integer from a range of ints
	// Usage: $$.randomInt(4, 8) -> would return
	// 4 or 5 or 6 or 7 or 8
	randomInt: function(min, max) {
		return Math.floor( Math.random() * (max - min + 1) + min );
	}
};

var mousePos = { x: (window_width/2), y: (window_height/2) }


var particles = [];

var Particle = {
	x: mousePos.x,
	y: mousePos.y,
	x_speed: 0,
	y_speed: 0,
	radius: 30,
	x_curve: 0,
	y_curve: 0,
	colorStart: 45,
	b: 40,
	_position: {},
	
	// Draw the particle
	draw: function() {
		ctx.beginPath();
		ctx.fillStyle = this.bg_color;
		ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
		ctx.closePath();
		ctx.fill();
	},

	trackPosition: function() {
		var position = {x: this.x, y: this.y};
		
		this._position.x = this.x;
		this._position.y = this.y;
	},
	getPosition: function() {
		return this._position;
	}
};

function createParticle() {
	var particle = Object.create(Particle);
	
	particle.colorStart = $$.randomInt(0, 128); 
	particle.x = mousePos.x;
	particle.y = mousePos.y;
	particle.x_speed = $$.randomInt(-10, 10);
	particle.y_speed = $$.randomInt(-1, 1);
	particle.x_curve = ($$.randomInt(-2, 2) / 100),
	particle.y_curve = ($$.randomInt(-20, 20) / 100),
	particles.push(particle);
}

function repaint() {
	ctx.fillStyle = 'rgba(0,0,0,0.5)';
	ctx.fillRect(0, 0, window_width, window_height);
	
	for (var i = 0; i < particles.length; i++) {
		var particle = particles[i];
		
		particle.b -= 0.5;
		particle.bg_color = "hsla("+((i)+particle.colorStart)+", 90%, 50%, "+(particle.b/50)+")";
		

		if (particles.length > 500) {
			particles.shift();
		}
		
		particle.draw();
		particle.x_speed += particle.x_curve;
		particle.y_speed += particle.y_curve;
		particle.x = particle.x + particle.x_speed;
		particle.y = particle.y + particle.y_speed;
		particle.trackPosition();
	}
}

window.onmousemove = function (event) {
    event = event || window.event; // IE-ism
    mousePos.x = event.clientX;// - (window_width/2);
		mousePos.y = event.clientY;// - (window_height/2);
}
	

// Magic method for animation!
function animate () {
	var i = 4;
	while ( !!i ) {
		createParticle();
		i--;
	}
	repaint();
	window.requestAnimationFrame(animate);
}
window.requestAnimationFrame(animate);
</script>

</body>
</html>