• افکت زیبای جاوا اسکریپت حباب های رنگی
    #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 1,252 07-02-2015 ساعت 09:34
    آخرین ارسال: WWWorker
    Note جی کوئری::اسلایدر ساده و زیبا Behnam Designer 0 491 11-09-2014 ساعت 18:41
    آخرین ارسال: Behnam Designer
    Note ماشین حساب ساده با جاوا اسرکیپت Ali Developer 0 559 03-07-2014 ساعت 11:06
    آخرین ارسال: Ali Developer
    Note تحلیل این کد جاوا اسکریپت pirzad_7@yahoo. 0 528 30-06-2014 ساعت 10:59
    آخرین ارسال: pirzad_7@yahoo.
    Note جاوا اسکریپت: پیدا کردن المنتی که تابع را صدا کرده SOFTAFZAR 0 523 14-05-2014 ساعت 14:17
    آخرین ارسال: SOFTAFZAR
    Note گرفتن URL جاری بدون Hash در جاوا اسکریپت WWWorker 0 522 15-03-2014 ساعت 10:13
    آخرین ارسال: WWWorker
    Note رفتن به صفحه قبل (دکمه بازگشت) در جاوا اسکریپت WWWorker 0 741 15-03-2014 ساعت 10:05
    آخرین ارسال: WWWorker
    Note گرفتن المنت با مشخصه آن (getElementsByAttr) در جاوا اسکریپت WWWorker 0 395 15-03-2014 ساعت 10:00
    آخرین ارسال: WWWorker
    Note کد redirect کردن در جاوا اسکریپت WWWorker 0 641 15-03-2014 ساعت 09:58
    آخرین ارسال: WWWorker
    Note کد بستن پنجره در جاوا اسکریپت WWWorker 0 507 15-03-2014 ساعت 09:56
    آخرین ارسال: WWWorker

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