<div class="starfield"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js"></script>
.starfield { height:100%; left:0; position:absolute; top:0; width:100%; z-index:0;}
// Konstantin Endreev from tilda//

;(function ( $, window, document, undefined ) {
  // Plugin constructor
  var Starfield = function(el, options) {
    this.el     = el;
    this.$el    = $(el);
    this.options  = options;

    that      = this;
  };

  var isPlaying;
  var isInited  = false;
  var canCanvas = false;
  var animId;

  // MIT license

  (function() {
    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);
      };
  }());
  
  // Plugin prototype
  Starfield.prototype = {
    // Default settings
    defaults: {
      starColor:  "rgba(255,255,255,1)", 
      bgColor:  "rgba(0,0,0,8)",
      mouseMove:  true,
      mouseColor: "rgba(0,0,0,0.2)",
      mouseSpeed: .09,
      fps:    15,
      speed:    1,
      quantity: 512,
      ratio:    256,
      divclass: "starfield"
    },

    // Resize the canvas
    resizer: function() {
      var oldStar       = this.star;
      var initW       = this.context.canvas.width;
      var initH       = this.context.canvas.height;

      this.w          = this.$el.width();
      this.h          = this.$el.height();
      this.x          = Math.round(this.w /150);
      this.y          = Math.round(this.h / 200);

      // Check if the device is in portrait orientation
      this.portrait     = this.w < this.h;

      // Get the ratio of the old height to the new height
      var ratX        = this.w / initW;
      var ratY        = this.h / initH;

      this.context.canvas.width = this.w;
      this.context.canvas.height  = this.h;

      // Recalculate the position of each star proportionally to new w and h
      for(var i = 0; i < this.n; i++) {
        this.star[i][0] = oldStar[i][0] * ratX;
        this.star[i][1] = oldStar[i][1] * ratY;

        this.star[i][3] = this.x + (this.star[i][0] / this.star[i][2]) * this.star_ratio;
        this.star[i][4] = this.y + (this.star[i][1] / this.star[i][2]) * this.star_ratio;
      }

      that.context.fillStyle    = that.settings.bgColor;
      this.context.strokeStyle  = this.settings.starColor;
    },

    init: function() {
      // Get default settings 
      this.settings = $.extend({}, this.defaults, this.options);

      // Query variables
      var url = document.location.href;
      this.n  = parseInt(
        (url.indexOf('n=') != -1) ? url.substring(url.indexOf('n=') + 2, (
          (url.substring(
            url.indexOf('n=') + 2,
            url.length)
          ).indexOf('&') != -1) ? url.indexOf('n=') + 2 + (url.substring(
            url.indexOf('n=') + 2,
            url.length)
          ).indexOf('&') :
            url.length) :
              this.settings.quantity
      );

      this.flag       = true;
      this.test         = true;
      this.w          = 0;
      this.h          = 0;
      this.x          = 0;
      this.y          = 0;
      this.z          = 0;
      this.star_color_ratio = 0;
      this.star_x_save    = 0;
      this.star_y_save    = 0;
      this.star_ratio     = this.settings.ratio;
      this.star_speed     = this.settings.speed;
      this.star_speed_save  = 0;
      this.star       = new Array(this.n);
      this.color        = this.settings.starColor;
      this.opacity      = 0.1;

      this.cursor_x     = 0;
      this.cursor_y     = 0;
      this.mouse_x      = 0;
      this.mouse_y      = 0;

      this.canvas_x     = 0;
      this.canvas_y     = 0;
      this.canvas_w     = 0;
      this.canvas_h     = 0;
      
      this.fps        = this.settings.fps;

      // Check for device orientation support
      this.desktop      = !navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|BB10|IEMobile)/);
      this.orientationSupport = window.DeviceOrientationEvent !== undefined;
      this.portrait     = null;

      // Inject the canvas element
      var canvasInit = function(){
        that.w      = that.$el.width();
        that.h      = that.$el.height();

        that.initW    = that.w;
        that.initH    = that.h;

        that.portrait = that.w < that.h;

        that.wrapper  = $('<canvas />')
        .addClass(that.settings.divclass);

        that.wrapper.appendTo(that.el);

        that.starz  = $('canvas', that.el);

        if (that.starz[0].getContext) { // Can canvas?
          that.context  = that.starz[0].getContext('2d');
          canCanvas   = true;
        }

        that.context.canvas.width = that.w;
        that.context.canvas.height = that.h;
      }
      canvasInit();

      // Create initial star array and canvas context
      var starInit = function(){
        // Get context for the canvas element
        if(canCanvas){ // Check for canvas drawering abilities.
          that.x          = Math.round(that.w / 2);
          that.y          = Math.round(that.h / 2);
          that.z          = (that.w + that.h) / 2;
          that.star_color_ratio = 1 / that.z;
          that.cursor_x     = that.x;
          that.cursor_y     = that.y;

          // Big bang
          for(var i = 0; i < that.n; i++) {
            that.star[i]  = new Array(5); 

            that.star[i][0] = Math.random() * that.w * 2 - that.x * 2;
            that.star[i][1] = Math.random() * that.h * 2 - that.y * 2;
            that.star[i][2] = Math.round(Math.random() * that.z);
            that.star[i][3] = 0;
            that.star[i][4] = 0;
          }

          // Set the colors
          that.context.fillStyle    = that.settings.bgColor;
          that.context.strokeStyle  = that.settings.starColor;
        } else {
          return;
        }
      }
      starInit();

      isInited = true;
    },

    // Iterate over every star on the field and move it slightly
    anim: function(){
      this.mouse_x  = this.cursor_x - this.x;
      this.mouse_y  = this.cursor_y - this.y;
      this.context.fillRect(0, 0, this.w, this.h);

      for(var i = 0; i < this.n; i++) {
        this.test     = true;
        this.star_x_save  = this.star[i][3];
        this.star_y_save  = this.star[i][4];
        this.star[i][0] += this.mouse_x >> 7;

        // X coords
        if(this.star[i][0] > this.x << 1) {
          this.star[i][0] -= this.w << 1;
          this.test = false;
        }
        if(this.star[i][0] <- this.x << 1) {
          this.star[i][0] += this.w << 1;
          this.test = false;
        }

        // Y coords
        this.star[i][1] += this.mouse_y >> 7;
        if(this.star[i][1] > this.y << 1) {
          this.star[i][1] -= this.h << 1;
          this.test = false;
        }
        if(this.star[i][1] <- this.y << 1) {
          this.star[i][1] += this.h << 1;
          this.test = false;
        }

        // Z coords
        this.star[i][2] -= this.star_speed;
        if(this.star[i][2] > this.z) {
          this.star[i][2] -= this.z;
          this.test = false;
        }
        if(this.star[i][2] < 0) {
          this.star[i][2] += this.z;
          this.test = false;
        }

        this.star[i][3] = this.x + (this.star[i][0] / this.star[i][2]) * this.star_ratio;
        this.star[i][4] = this.y + (this.star[i][1] / this.star[i][2]) * this.star_ratio;

        if(this.star_x_save > 0
        && this.star_x_save < this.w
        && this.star_y_save > 0
        && this.star_y_save < this.h
        && this.test) {
          this.context.lineWidth = (1 - this.star_color_ratio * this.star[i][2]) * 2;
          this.context.beginPath();
          this.context.moveTo(this.star_x_save,this.star_y_save);
          this.context.lineTo(this.star[i][3], this.star[i][4]);
          this.context.stroke();
          this.context.closePath();
        }
      }
    },

    loop: function(){
      this.anim();

      animId = window.requestAnimationFrame(function(){that.loop()});
    },

    move: function(){
      var doc = document.documentElement;

      if (this.orientationSupport && !this.desktop) {
        //$('<p class="output"></p>').prependTo('.content');
        //var output = document.querySelector('.output');
        window.addEventListener('deviceorientation', handleOrientation, false);
      } else {
        window.addEventListener('mousemove', handleMousemove, false);
      }

      function handleOrientation(event) {
        if( event.beta !== null && event.gamma !== null) {
          var x = event.gamma, y = event.beta;

          if (!that.portrait) {
            x = event.beta * -1;
            y = event.gamma;
          }

          that.cursor_x = (that.w / 2) + (x * 5);
          that.cursor_y = (that.h / 2) + (y * 5);

          /*var output = document.querySelector('.output');
          output.innerHTML = "rotZ : " + Math.round(event.alpha) + "<br />\n";
          output.innerHTML += "rotX: " + Math.round(event.beta) + "<br />\n";
          output.innerHTML += "rotY: " + Math.round(event.gamma) + "<br />\n";*/
        }
      }

      function handleMousemove(event) {
        that.cursor_x = event.pageX || event.clientX + doc.scrollLeft - doc.clientLeft;
        that.cursor_y = event.pageY || event.clientY + doc.scrollTop - doc.clientTop;
      }
    },

    stop: function(){
      window.cancelAnimationFrame(animId);

      isPlaying = false;
    },

    // this.start this whole thing
    start: function() {
      // Initialize
      if (!isInited) {
        isInited = true;
        this.init();
      }
      
      // Start the animation loop
      if (!isPlaying) {
        isPlaying = true;
        this.loop();
      }

      window.addEventListener('resize', function(){that.resizer()}, false);

      window.addEventListener('orientationchange', function(){that.resizer()}, false);

      // Move stars on mouse move
      if (this.settings.mouseMove) {
        this.move();
      }

      return this;
    }
  }

  Starfield.defaults  = Starfield.prototype.defaults;

  // Finally, the actual plugin code
  $.fn.starfield = function(options){
    return this.each(function() {
      new Starfield(this, options).start();
    });
  }

  window.Starfield = Starfield;
})( jQuery, window, document );

$('.starfield').starfield();

// заменить  $('поставить айди блока').starfield(); //

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://rawgit.com/mrdoob/stats.js/master/build/stats.min.js