ÉTAPE 4

Alors, avant de commencer, faites un peu de fond pour savoir avec quoi vous travaillez. Selon les créateurs de JQuery. «JQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités. Avec une API facile à utiliser qui fonctionne dans une grande variété de navigateurs, des choses comme la navigation et la modification de documents HTML, la gestion des événements, l’animation et Ajax sont beaucoup plus faciles. «Avant d’arriver à la dernière section de code, il y aura deux extraits de code. Habituellement, vous pouvez faire cela en une étape au lieu de deux, mais je pensais que ce serait plus facile d’apprendre et de voir comment les choses s’emboîtent et fonctionnent. Une fois que vous vous sentirez à l’aise et que vous voudrez essayer d’autres stylos, vous saurez quoi faire. Cette première partie n’est que la partie shell du code JQuery dans laquelle vous placez le code JQuery réel. Nous vous recommandons de copier et coller ceci dans un document local et de l’enregistrer sur votre ordinateur ou sous forme de page séparée et de le stocker dans votre bibliothèque Divi. La raison pour laquelle nous vous recommandons d’enregistrer cet extrait de code est que cet extrait de code facilite la tâche si vous souhaitez utiliser un autre JQuery plus tard. Tout ce que vous avez à faire est de coller votre JQuery au-dessus de la ligne d’alerte (‘bonjour’). Accélérez votre temps de développement. Le reste du code doit rester le même. Le deuxième extrait de code est le code réel dont nous avons besoin pour donner vie à la magie de ce codepen.

ÉTAPE 4

<script type="text/javascript">
jQuery(function($){
    alert('hello');
});
</script>
<script type="text/javascript">
jQuery(function($){
 
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var max_particles = 300;
var particles = [];
var frequency = 100;
var init_num = max_particles;
var max_time = frequency * max_particles;
var time_to_recreate = false;

// Enable repopolate
setTimeout(function () {
  time_to_recreate = true;
}.bind(undefined), max_time);

// Popolate particles
popolate(max_particles);

var tela = document.createElement('canvas');
tela.width = $(window).width();
tela.height = $(window).height();
$(".connections").append(tela);

var canvas = tela.getContext('2d');

var Particle = function () {
  function Particle(canvas, options) {
    _classCallCheck(this, Particle);

    var colors = ["#feea00", "#a9df85", "#5dc0ad", "#ff9a00", "#fa3f20"];
    var types = ["full", "fill", "empty"];
    this.random = Math.random();
    this.canvas = canvas;
    this.progress = 0;

    this.x = $(window).width() / 2 + (Math.random() * 200 - Math.random() * 200);
    this.y = $(window).height() / 2 + (Math.random() * 200 - Math.random() * 200);
    this.w = $(window).width();
    this.h = $(window).height();
    this.radius = 1 + 8 * this.random;
    this.type = types[this.randomIntFromInterval(0, types.length - 1)];
    this.color = colors[this.randomIntFromInterval(0, colors.length - 1)];
    this.a = 0;
    this.s = (this.radius + Math.random() * 1) / 10;
    //this.s = 12 //Math.random() * 1;
  }

  Particle.prototype.getCoordinates = function getCoordinates() {
    return {
      x: this.x,
      y: this.y
    };
  };

  Particle.prototype.randomIntFromInterval = function randomIntFromInterval(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  };

  Particle.prototype.render = function render() {
    // Create arc
    var lineWidth = 0.2 + 2.8 * this.random;
    var color = this.color;
    switch (this.type) {
      case "full":
        this.createArcFill(this.radius, color);
        this.createArcEmpty(this.radius + lineWidth, lineWidth / 2, color);
        break;
      case "fill":
        this.createArcFill(this.radius, color);
        break;
      case "empty":
        this.createArcEmpty(this.radius, lineWidth, color);
        break;
    }
  };

  Particle.prototype.createArcFill = function createArcFill(radius, color) {
    this.canvas.beginPath();
    this.canvas.arc(this.x, this.y, radius, 0, 2 * Math.PI);
    this.canvas.fillStyle = color;
    this.canvas.fill();
    this.canvas.closePath();
  };

  Particle.prototype.createArcEmpty = function createArcEmpty(radius, lineWidth, color) {
    this.canvas.beginPath();
    this.canvas.arc(this.x, this.y, radius, 0, 2 * Math.PI);
    this.canvas.lineWidth = lineWidth;
    this.canvas.strokeStyle = color;
    this.canvas.stroke();
    this.canvas.closePath();
  };

  Particle.prototype.move = function move() {

    this.x += Math.cos(this.a) * this.s;
    this.y += Math.sin(this.a) * this.s;
    this.a += Math.random() * 0.4 - 0.2;

    if (this.x < 0 || this.x > this.w - this.radius) {
      return false;
    }

    if (this.y < 0 || this.y > this.h - this.radius) {
      return false;
    }
    this.render();
    return true;
  };

  Particle.prototype.calculateDistance = function calculateDistance(v1, v2) {
    var x = Math.abs(v1.x - v2.x);
    var y = Math.abs(v1.y - v2.y);
    return Math.sqrt(x * x + y * y);
  };

  return Particle;
}();

/*
 * Function to clear layer canvas
 * @num:number number of particles
 */

function popolate(num) {
  for (var i = 0; i < num; i++) {
    setTimeout(function (x) {
      return function () {
        // Add particle
        particles.push(new Particle(canvas));
      };
    }(i), frequency * i);
  }
  return particles.length;
}

function clear() {
  // canvas.globalAlpha=0.04;
  canvas.fillStyle="#111111";
  canvas.fillRect(0, 0, tela.width, tela.height);
  // canvas.globalAlpha=1;
}

function connection() {
  var old_element = null;
  $.each(particles, function (i, element) {
    if (i > 0) {
      var box1 = old_element.getCoordinates();
      var box2 = element.getCoordinates();
      canvas.beginPath();
      canvas.moveTo(box1.x, box1.y);
      canvas.lineTo(box2.x, box2.y);
      canvas.lineWidth = 0.45;
      canvas.strokeStyle = "#3f47ff";
      canvas.stroke();
      canvas.closePath();
    }

    old_element = element;
  });
}

/*
 * Function to update particles in canvas
 */
function update() {
  clear();
  connection();
  particles = particles.filter(function (p) {
    return p.move();
  });
  // Recreate particles
  if (time_to_recreate) {
    if (particles.length < init_num) {
      popolate(1);
    }
  }
  requestAnimationFrame(update.bind(this));
}

update();
});
</script>

Note latérale:
L’une des choses les plus importantes à savoir lorsque vous travaillez avec du code Codepen est que CSS, Javascript ou Jquery doivent être dans leur format natif. Par exemple, si vous n’êtes pas allé sur le lien donné plus haut dans l’article, allez ici maintenant liens

Dans la capture d’écran ci-dessous, vous pouvez voir les formats de codage actuels pour HTML, CSS et Javascript / Jquery. Le CSS l’affiche actuellement dans SASS et le Javascript dans Babel. Si nous copions le code comme celui-ci et essayions de l’exécuter dans Divi, cela ne fonctionnerait pas, mais cela peut facilement être changé.

Pour modifier le format du code en Codepen, cliquez sur la petite flèche déroulante à la fin du champ Type de code. Le CSS doit être en mode d’affichage compilé et la vue Javascript / JQuery doit être compilée. Si vous les avez correctement définis, les champs apparaîtront compilés à la place de SASS et Babel. Je vais partager cette astuce avec vous: si vous avez décidé d’utiliser d’autres stylos, l’un des principaux problèmes ne fonctionne pas.



Source link

Recent Posts