Блог

Я хотел бы знать, как создается «эффект перемещения» на этом сайте:

http://www.perturbator.com/

Я имею в виду розовые линии, а не логотип (), который является простым параллаксом).

РЕДАКТИРОВАТЬ (я не могу ответить сам через 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 amp;amp; (i_dot.y - j_dot.y) < dots.distance amp;amp; (i_dot.x - j_dot.x) > - dots.distance amp;amp; (i_dot.y - j_dot.y) > - dots.distance){
                   if((i_dot.x - mousePosition.x) < dots.d_radius amp;amp; (i_dot.y - mousePosition.y) < dots.d_radius amp;amp; (i_dot.x - mousePosition.x) > - dots.d_radius amp;amp; (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;
   }
});
});
  

Если вы говорите о том, что розоватый фон становится все больше и меньше, я полагаю, что это делается с помощью анимации CSS3http://www.w3schools.com/css/css3_animations.asp

Вы можете увидеть подробности, следуя цепочке DOM:

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

Если бы вы говорили о 3D «Perturbator», то я бы предположил, что что-то связанное с 3Dtransforms в JS-скрипте, но я не могу сказать намного больше…