سلام،
اینم یه افکت زیبای جاوا اسکریپت، افکت حباب های رنگی
[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>