什麼是用於背景效果？

Question

我想知道「移動效應」，它是在這個網站怎麼做：

http://www.perturbator.com/

我指的是粉色系，而不是標誌（）wichi是一個簡單的視差）。

編輯（我不能回答自己在8小時）：

它在base.js文件中的代碼。它繪製點，然後線。

$(function(){ 
var header = $('.site-header'), 
    canvas = $('<canvas></canvas>').appendTo(header)[0], 

    ctx = canvas.getContext('2d'), 
    color = '#fc335c', 
    idle = null, mousePosition; 

canvas.width   = window.innerWidth; 
canvas.height  = header.outerHeight(); 
canvas.style.display = 'block'; 

ctx.fillStyle = color; 
ctx.lineWidth = .1; 
ctx.strokeStyle = color; 

var mousePosition = { 
     x: 30 * canvas.width, 
     y: 30 * canvas.height 
    }, 
    dots = { 
     nb: 150, 
     distance: 90, 
     d_radius: 900, 
     array: [] 
    }; 

function Dot(){ 
    this.x = Math.random() * canvas.width; 
    this.y = Math.random() * canvas.height; 

    this.vx = -.5 + Math.random(); 
    this.vy = -.5 + Math.random(); 

    this.radius = Math.random(); 
} 

Dot.prototype = { 
    create: function(){ 
     ctx.beginPath(); 
     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); 
     ctx.fill(); 
    }, 

    animate: function(){ 

     for(var i = 0, dot=false; i < dots.nb; i++){ 

      dot = dots.array[i]; 

      if(dot.y < 0 || dot.y > canvas.height){ 
       dot.vx = dot.vx; 
       dot.vy = - dot.vy; 
      }else if(dot.x < 0 || dot.x > canvas.width){ 
       dot.vx = - dot.vx; 
       dot.vy = dot.vy; 
      } 
      dot.x += dot.vx; 
      dot.y += dot.vy; 
     } 
    }, 

    line: function(){ 
     for(var i = 0; i < dots.nb; i++){ 
      for(var j = 0; j < dots.nb; j++){ 
       i_dot = dots.array[i]; 
       j_dot = dots.array[j]; 

       if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){ 
        if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){ 
         ctx.beginPath(); 
         ctx.moveTo(i_dot.x, i_dot.y); 
         ctx.lineTo(j_dot.x, j_dot.y); 
         ctx.stroke(); 
         ctx.closePath(); 
        } 
       } 
      } 
     } 
    } 
}; 

function createDots(){ 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    for(var i = 0; i < dots.nb; i++){ 
     dots.array.push(new Dot()); 
     dot = dots.array[i]; 

     dot.create(); 
    } 

    dot.line(); 
    dot.animate(); 
} 

idle = setInterval(createDots, 1000/30); 

$(canvas).on('mousemove mouseleave', function(e){ 
    if(e.type == 'mousemove'){ 
     mousePosition.x = canvas.width/2; 
     mousePosition.y = canvas.height/2; 
    } 
    if(e.type == 'mouseleave'){ 
     mousePosition.x = canvas.width/2; 
     mousePosition.y = canvas.height/2; 
    } 
}); 
}); 

Answer 1

如果你談論的是粉紅色的背景越來越大，小的，我相信這是一個CSS3動畫做http://www.w3schools.com/css/css3_animations.asp

你可以看到DOM鏈以下細節：

<div id="home"> 
    <div>... 
    <div>... 
    <div class="bg-layer"> 

如果你在談論3D「Perturbator」，那麼我會猜測一些與JS腳本中的3D轉換相關的東西，但我不能告訴更多...