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

[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>

مردم دنیا 10 دسته هستند: کسانی که باینری میفهمند و کسانی که باینری نمیفهمند !
پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Note کد جاوا اسکریپت برای بوکمارک کردن صفحه WWWorker 0 797 07-02-2015 ساعت 09:34
آخرین ارسال: WWWorker
Note جی کوئری::اسلایدر ساده و زیبا Behnam Designer 0 350 11-09-2014 ساعت 18:41
آخرین ارسال: Behnam Designer
Note ماشین حساب ساده با جاوا اسرکیپت Ali Developer 0 393 03-07-2014 ساعت 11:06
آخرین ارسال: Ali Developer
Note تحلیل این کد جاوا اسکریپت pirzad_7@yahoo. 0 412 30-06-2014 ساعت 10:59
آخرین ارسال: pirzad_7@yahoo.
Note جاوا اسکریپت: پیدا کردن المنتی که تابع را صدا کرده SOFTAFZAR 0 414 14-05-2014 ساعت 14:17
آخرین ارسال: SOFTAFZAR
Note گرفتن URL جاری بدون Hash در جاوا اسکریپت WWWorker 0 387 15-03-2014 ساعت 10:13
آخرین ارسال: WWWorker
Note رفتن به صفحه قبل (دکمه بازگشت) در جاوا اسکریپت WWWorker 0 556 15-03-2014 ساعت 10:05
آخرین ارسال: WWWorker
Note گرفتن المنت با مشخصه آن (getElementsByAttr) در جاوا اسکریپت WWWorker 0 306 15-03-2014 ساعت 10:00
آخرین ارسال: WWWorker
Note کد redirect کردن در جاوا اسکریپت WWWorker 0 453 15-03-2014 ساعت 09:58
آخرین ارسال: WWWorker
Note کد بستن پنجره در جاوا اسکریپت WWWorker 0 366 15-03-2014 ساعت 09:56
آخرین ارسال: WWWorker

کاربرانِ درحال بازدید از این موضوع:   1 مهمان