Question

我想知道＆＃34;移动效果＆＃34;它是在这个网站上制作的：

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剧本中有关3Dtransforms的内容，但我不能说更多......

什么用于后台效果？

1 个答案: