Advertisement
KiberInfinity

Animated Background

Mar 8th, 2013
96
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. (function(){
  2.    function AnimBg() {
  3.       //------------------------
  4.       var body=document.getElementsByTagName('body')[0];
  5.       if (!body) {
  6.          setTimeout(AnimBg,10);
  7.          return;
  8.       }
  9.       var canvas = document.createElement('canvas');
  10.       canvas.setAttribute('style','position:fixed');
  11.       body.insertBefore(canvas, body.firstChild);
  12.       var ctx = canvas.getContext("2d");
  13.       //------------------------
  14.      
  15.      
  16.       //Set the dimensions of canvas equal to the window's dimensions
  17.       var W = window.innerWidth, H = window.innerHeight;
  18.       canvas.width = W;
  19.       canvas.height = H;
  20.      
  21.       //Create an array of circles
  22.       var circles = [];
  23.       var circles_count = 20;
  24.      
  25.       for(var i = 0; i < circles_count; i++ ){
  26.          circles.push(new create_circle());
  27.       }
  28.      
  29.       //Function to create circles with different positions and velocities
  30.       function create_circle() {
  31.          //Random Position
  32.          this.x = Math.random()*W;
  33.          this.y = Math.random()*H;
  34.          
  35.          //Random Velocities
  36.          this.vx = 0.1+Math.random()*0.5;
  37.          this.vy = -this.vx;
  38.          
  39.          //Random Radius
  40.          this.r = 10 + Math.random()*50;
  41.       }
  42.      
  43.       //Create line particles
  44.       var lines = [];
  45.       var lines_count = 15;
  46.  
  47.       for(var i = 0; i < lines_count; i++){
  48.          lines.push(new create_lines());
  49.       }
  50.      
  51.       function create_lines() {
  52.          //Random Positions
  53.          this.x = Math.random()*W;
  54.          this.y = Math.random()*H;
  55.          
  56.          //Random Velocities
  57.          this.vx = 0.1+Math.random()*0.8;
  58.          this.vy = -this.vx;
  59.          
  60.          //Random Length
  61.          this.l = 5 + Math.random()*20;
  62.       }
  63.      
  64.       //Function to draw the background
  65.       function draw() {
  66.          //------------------------
  67.          W = window.innerWidth;
  68.          H = window.innerHeight;
  69.          if (canvas.width!=W) canvas.width = W;
  70.          if (canvas.height!=H) canvas.height = H;
  71.          //------------------------
  72.            
  73.          //Create the gradient
  74.          var grad = ctx.createLinearGradient(0, 0, W, H);
  75.          grad.addColorStop(0, 'rgb(1, 106, 1)');
  76.          grad.addColorStop(0.9, 'rgb(0, 0, 0)');
  77.          
  78.          //Fill the canvas with the gradient
  79.          ctx.globalCompositeOperation = "source-over";
  80.          ctx.fillStyle = grad;
  81.          ctx.fillRect(0,0,W,H);
  82.  
  83.          //Fill the canvas with the circles
  84.          for(var i = 0; i < circles.length; i++) {
  85.             var c = circles[i];
  86.            
  87.             //Gradient for circle to create blur
  88.             var blur_grad = ctx.createRadialGradient(c.x, c.y, 0, c.x, c.y, c.r);
  89.             blur_grad.addColorStop(0, "rgba(0,120,1,0.5)");
  90.             blur_grad.addColorStop(0.85, "rgba(0,120,1,0.5)");
  91.             blur_grad.addColorStop(1, "rgba(0,120,1,0.0)");
  92.            
  93.             //Draw the circle and fill it with the blur gradient
  94.             ctx.beginPath();
  95.             ctx.globalCompositeOperation = "lighter";      
  96.             ctx.fillStyle = blur_grad;
  97.             ctx.arc(c.x, c.y, c.r, Math.PI*2, false);
  98.             ctx.fill();
  99.            
  100.             //Lets use the velocity now
  101.             c.x += c.vx;
  102.             c.y += c.vy;
  103.            
  104.             //To prevent the circles from moving out of the canvas
  105.             if(c.x < -50) c.x = W+50;
  106.             if(c.y < -50) c.y = H+50;
  107.             if(c.x > W+50) c.x = -50;
  108.             if(c.y > H+50) c.y = -50;
  109.          }
  110.          
  111.          //Fill the canvas with lines
  112.          for(var i = 0; i < lines.length; i++) {
  113.             var l = lines[i];
  114.            
  115.             //Draw the lines
  116.             ctx.beginPath();
  117.             ctx.globalCompositeOperation = "lighter";
  118.            
  119.             //Save and restore are used to prevent the circles from getting
  120.             //the glow or shadow
  121.             ctx.save();
  122.             ctx.moveTo(l.x, l.y);
  123.             ctx.shadowColor = "white";
  124.             ctx.shadowBlur = 10;
  125.             ctx.lineTo(l.x + l.l, l.y - l.l);
  126.             ctx.strokeStyle = "rgba(0,120,1,0.5)";
  127.             ctx.stroke();
  128.             ctx.restore();
  129.            
  130.             //Move the lines
  131.             l.x += l.vx;
  132.             l.y += l.vy;
  133.            
  134.             //To prevent the lines from moving out of the canvas
  135.             if(l.x < -20) l.x = W+20;
  136.             if(l.y < -20) l.y = H+20;
  137.             if(l.x > W+20) l.x = -20;
  138.             if(l.y > H+20) l.y = -20;
  139.          }
  140.       }
  141.      
  142.       setInterval(draw, 25);
  143.  
  144.    }
  145.  
  146.    AnimBg();
  147. }) ()
Advertisement
RAW Paste Data Copied
Advertisement