Accentsconagua

L'effet luciole

Code
Share

Les images cosmiques sont utilisées sur de nombreux sites Web comme image de fond. Ces images sont sans aucun doute belles, mais après tout ce sont des images fixes qui offrent peu de vivacité. Avec jQuery, nous pouvons redonner vie à une image cosmique immobile en ajoutant des particules de poussière dans l’espace volant comme des lucioles. Dans ce tutoriel, nous verrons comment implémenter cet effet en 30 minutes. Nous allons aussi apprendre un peu de techniques Javascript orientées objet.

Caractéristiques

  1. Les particules se déplacent à des vitesses et dans des directions aléatoires (mouvement brownien).
  2. Quatre modèles de particules sont fournis dans ce tutoriel. Chacun a un look légèrement différent.
  3. Le nombre total de particules est configurable.

Nous allons regarder ce fond cosmique pendant assez longtemps. Pour rendre nos yeux plus confortables, une image sombre et simple est utilisée comme arrière-plan dans ce tutoriel. N'hésitez pas à utiliser des images plus colorées dans vos propres projets.

Les particules

Pour rendre cet effet plus réaliste, nous avons quatre modèles de particules dans ce didacticiel. Ce sont de minuscules images de tailles et de styles différents. Regardez la figure ci-dessous pour plus de détails:

  • La particule 1 est plus petite mais plus brillante. On dirait que c'est parfaitement net pour que nous puissions le voir clairement.
  • La particule 4 est plus grosse mais plus sombre (si sombre que vous pouvez à peine la voir), ce qui imite un objet flou.

Le HTML

Contrairement à la plupart des tutoriels, c'est l'arrière-plan d'une page Web sur laquelle nous allons nous concentrer aujourd'hui, ce qui rend le code HTML très simple:

  • Il n'y a pas d'éléments dans le corps étiquette. Donc rien ne nous détournera du fond et de l'animation.
  • Avec la définition CSS, un fond cosmique est défini pour le corps de cette page. Cela devrait être très simple.
  • jQuery est inclus comme d'habitude.
    L'effet luciole

JavaScript orienté objet

Regardons maintenant de plus près la vie d'une particule. Chaque particule peut différer par son apparence. Et ils se déplacent à des vitesses et des directions différentes. Mais ils suivent tous le même ensemble de règles qui peuvent être décrites comme une séquence d'actions:

  1. Choisissez au hasard un modèle de particules.
  2. Créer un DOM pour cette particule.
  3. Générer une vitesse aléatoire pour cette particule.
  4. Génère la position initiale (Point X et Point Y) pour cette particule.
  5. Affiche la particule à la position générée en 4.
  6. Générer une autre position (Point X et Point Y) vers laquelle la particule se déplace.
  7. Animer le mouvement des particules à la position générée en 6.
  8. Répétez 6 et 7 fois l'animation mentionnée en 7 finitions.

Chaque particule suit exactement ces huit étapes tout au long de sa vie. Et les facteurs aléatoires, tels que la position et la vitesse, font que chaque particule se comporte de manière unique. C'est un cas parfait pour mettre en œuvre certaines techniques de programmation orientée objet. Enveloppons ces huit étapes dans une "classe" qui sera instanciée plusieurs fois pour créer plusieurs instances de la même logique. Chaque instance (particule) se trouve dans une voie séparée et conserve sa propre vitesse et sa propre direction.

Il est important de noter qu'il n'y a pas de classes en JavaScript. Les fonctions peuvent être utilisées pour simuler quelque peu les classes, mais en général, JavaScript est basé sur un prototype plutôt que sur une classe. Tout est un objet. Pour plus d'informations sur la définition et l'instanciation d'une "classe" JavaScript, consultez ces articles..

Dans cet effet même, une 'classe' est définie puis instanciée 50 fois avec le code suivant.

 function Particle () // 1. Choisit un modèle de particule au hasard. // 2. Créez un DOM pour cette particule. // 3. Génère une vitesse aléatoire pour cette particule. // 4. Génère la position initiale (Point X et Point Y) pour cette particule. // 5. Affichez la particule à la position générée dans 4. // 6. Générez une autre position (Point X et Point Y) vers laquelle la particule se déplace. // 7. Animez le mouvement de la particule à la position générée en 6. // 8. Répétez les étapes 6 et 7 une fois l'animation mentionnée en 7 terminée. ; function randomInt (max) // Génère un entier aléatoire (0 <= randomInt < max) return Math.floor(Math.random() * max);  $(function() var total = 50; var particles = []; for (i = 0; i < total; i++) particles[i] = new Particle();  );
  1. La logique en huit étapes est encapsulée dans une fonction nommée Particule. Définir une fonction est le moyen de définir une 'classe' en Javascript.
  2. Nous aurons besoin de générer beaucoup d’entiers aléatoires dans cet effet, de la vitesse aux positions X-Y. Écrivons donc une fonction dans ce seul but et nommons-la randomInt. Il génère un entier aléatoire inférieur à un nombre donné. Nous allons utiliser cette fonction de temps en temps, alors n'oubliez pas.
  3. À la fin, nous instancions le Particule fonctionnent en boucle, créant 50 instances de particules, chacune stockée dans un tableau nommé des particules. Faites attention au 'Nouveau'mot-clé que nous utilisons pour instancier un objet.

Quelques réglages de base

Dans cette section, nous allons définir les propriétés et les méthodes de la classe Particle. Et nous verrons comment choisir au hasard un modèle de particules.

Nous pouvons utiliser le 'ce'mot-clé pour définir les propriétés d'une' classe '. Quand il s’agit de définir des méthodes, le 'prototypeLa propriété est la voie à suivre. Regardez le code ci-dessous et nous vous donnerons quelques explications.

 fonction Particle () this.path = 'images /'; this.images = ['particule1.png', 'particule2.png', 'particule3.png', 'particule4.png']; // Choisissez au hasard un modèle de particules this.image = this.images [randomInt (this.images.length)]; this.file = this.path + this.image; // Créer un DOM de particule this.element = document.createElement ('img'); // Une séquence d'actions à effectuer this.speed (). NewPoint (). Display (). NewPoint (). Fly (); ; // Génère une particule à vitesse aléatoire.prototype.speed = function () ; // Génère une particule de position aléatoire.prototype.newPoint = function () ; // Affiche la particule Particle.prototype.display = function () ; // Animation des mouvements de particules Particle.prototype.fly = function () ;
  1. Dans les lignes 2 et 3, nous définissons le chemin et les noms de fichiers de nos images de particules. Il y a plus d'une image de particule, nous les stockons donc dans un tableau (une propriété de Particule).
  2. Sur la ligne 6, une image de particule aléatoire est sélectionnée dans le tableau mentionné ci-dessus. le randomInt La fonction que nous avons définie précédemment est utilisée ici. Très pratique, hah?
  3. Dans la ligne 7, nous concaténons le chemin et le nom du fichier..
  4. Dans la ligne 10, un DOM img est créé. C'est le contenant d'une particule.
  5. La ligne 13 est au cœur de cet effet. Une séquence de méthodes est appelée dans une chaîne. Cette seule ligne de code couvre les étapes 3 à 8 mentionnées dans la section précédente. Nous allons passer en revue chacune de ces méthodes très bientôt.
  6. De la ligne 17 jusqu’à la fin, quatre méthodes sont définies pour la Particule classe. Chacun d'eux prend en charge une chose particulière pour une particule. La vitesse() génère la vitesse aléatoire. NewPoint () génère un ensemble aléatoire de positions X-Y. Afficher() s'assure que la particule est affichée correctement. Et voler() s'occupe de l'animation.
  7. Faites attention à la façon dont nous définissons les méthodes pour une «classe» dans les lignes 17, 20, 23 et 26. De nouvelles méthodes sont définies dans prototype propriété d'une classe. Cela peut sembler un peu délicat aux gars de C, Java ou PHP (comme moi). Si vous vous sentez mal à l'aise avec cela, n'hésitez pas à passer une minute à lire cet article..

En fait, il existe différentes manières de définir les propriétés et les méthodes d'une classe Javascript. Voici un excellent article sur ce sujet.

Vitesse aléatoire

Nous avons maintenant une idée du fonctionnement de cet effet. À partir de cette section, nous allons commencer à écrire les fonctions que nous utilisons pour manipuler le mouvement d'une particule.

Tout d'abord, générons une vitesse aléatoire pour une particule. La vitesse détermine la vitesse de déplacement d'une particule. Si vous connaissez jQuery, vous comprendrez que nous ne pouvons pas passer à la vitesse réelle, disons 100 pixels par seconde. En fait, le paramètre utilisé pour décrire la vitesse dans jQuery est la durée mesurée en millisecondes. La question est donc de savoir comment générer une durée raisonnable pendant laquelle une particule se déplace d’un endroit à un autre. Qu'en est-il du code suivant?

 // Génération de particules aléatoires à vitesse aléatoire.prototype.speed = fonction () this.duration = (randomInt (10) + 5) * 1000; retournez ceci; ;
  1. Dans la ligne 3, nous générons simplement un entier aléatoire compris entre 5 000 et 14 000. C’est-à-dire qu’une particule gardera sa vitesse et sa direction inchangées pendant 5 à 14 secondes avant de prendre un virage et d’aller ailleurs..
  2. Regardez la ligne 5. Pourquoi avons-nous retourner cette? Rappelez-vous que ces fonctions seront appelées dans une chaîne? Le renvoi de l'objet d'origine garantit le bon fonctionnement de la fonction de fin. Nous aurons besoin de cela dans d'autres méthodes aussi.
  3. Une fois cette fonction exécutée, un durée propriété accessible dans un Particule exemple.

Position aléatoire

Un ensemble aléatoire de positions X-Y est très utile dans cet effet. Il peut être utilisé pour déterminer:

  • A quel point une particule apparaît initialement,
  • Vers quel point une particule se déplace une fois qu'elle est née ou termine un voyage.

Voici le code dont nous avons besoin pour générer un ensemble aléatoire de positions X-Y.

 // Génère une particule de position aléatoire.prototype.newPoint = function () this.pointX = randomInt (window.innerWidth - 100); this.pointY = randomInt (window.innerHeight - 100); retournez ceci; ;

La taille de la fenêtre actuelle du navigateur peut être extraite de window.innerWidth et window.innerHeight. Si une particule dépasse la limite de la fenêtre, des barres de défilement apparaissent. Nous ne voulons peut-être pas que cela se produise. Limitons donc le mouvement des particules dans une zone moins large et plus haute de 100 pixels que la fenêtre du navigateur. Le code ci-dessus devrait être assez simple. Après que cette fonction soit exécutée, pointX et pointY les propriétés deviennent accessibles. Une fois que la fonction s'exécute une seconde fois, pointX et pointY sera renouvelé dans le cas de Particule.

Afficher la particule

Dans les sections précédentes, un DOM img avait déjà été créé pour une nouvelle particule. Nous allons maintenant définir quelques attributs et afficher la particule quelque part dans la fenêtre du navigateur. Ceci est accompli avec le code suivant.

 // Affiche la particule Particle.prototype.display = function () $ (this.element) .attr ('src', this.file) .css ('position', 'absolute') .css ('top', this.pointY) .css ('left', this.pointX); $ (document.body) .append (this.element); retournez ceci; ;
  1. En ligne 3, this.element contient le DOM img créé. Nous allons définir les attributs pour cela dans cette fonction.
  2. En ligne 4, ce fichier contient l'image aléatoire que nous avons choisie parmi les quatre modèles de particules. En mettant le src attribut, nous apportons l'image de la particule au nouveau DOM img.
  3. Avec les lignes 5 à 7, la particule est positionnée quelque part dans la fenêtre du navigateur..
  4. Dans la ligne 8, le DOM img qui vient d'être créé est ajouté au corps. La particule n'apparaîtra jamais à moins d'écrire cette ligne de code simple.

Animer les mouvements de particules

Enfin, nous arrivons à la partie animation qui peut paraître plus simple que vous ne le pensiez.

La fonction animate dans jQuery fera l'affaire pour nous. Il faut quatre paramètres: animate (paramètres, durée, atténuation, rappel). Consultez la documentation si vous n'avez aucune idée de ce qu'elle fait.

 // Animation des mouvements de particules Particle.prototype.fly = function () var self = this; $ (this.element) .animate ("top": this.pointY, "left": this.pointX,, this.duration, 'linear', function () self.speed (). newPoint (). voler(); ); ;

Ce que fait le code ci-dessus est assez simple:

  1. Il anime la particule dans une position aléatoire.
  2. L'animation prend cette.duration millisecondes à compléter.
  3. La particule se déplace à vitesse constante. (Le mode d'accélération est «linéaire».)
  4. Une fois l'animation terminée, le code de la ligne 8 sera exécuté en tant que rappel..
  5. Sur la ligne 8, une nouvelle vitesse sera générée, une nouvelle position sera calculée et le voler() la fonction (celle que nous écrivons dans cette section) sera exécutée à nouveau.
  6. Répétez à partir de l'étape 1.

Alors le voler() fonction s’appelle de manière répétée. Avec cette fonction récursive, l'animation continue indéfiniment. A présent, nous sommes en mesure d'écrire toute l'histoire de la vie d'une particule. Souviens-toi encore de la chaîne suivante?

 this.speed (). newPoint (). display (). newPoint (). fly ();

Passons en revue ce qu'il fait:

  1. Une nouvelle vitesse est générée.
  2. Un nouvel ensemble de positions X-Y est calculé.
  3. La particule apparaît à la position calculée à l'étape 3.
  4. Une nouvelle position est calculée.
  5. La particule se déplace vers la position calculée à l'étape 5.
  6. Une nouvelle vitesse est générée.
  7. Un nouvel ensemble de positions X-Y est calculé.
  8. La particule se déplace vers la position calculée à l'étape 7.
  9. Une fois l'animation terminée, recommencez à l'étape 6.

Si ces étapes vous ressemblent à une vrille… Eh bien, regardez encore cette figure. Vous devriez être capable de coder chaque étape maintenant. Et vous devriez savoir comment organiser tout cela dans une structure orientée objet. Enfin l'effet luciole est complet.


Conclusion

Maintenant, tout le monde devrait pouvoir appliquer cet effet dans ses propres projets. J'espère que vous avez également une meilleure compréhension de Javascript orienté objet.

La première chose que j'aime dans cet effet est qu'en modifiant les images d'arrière-plan et de particules, vous pouvez obtenir une apparence et une sensation complètement différentes. Vous pouvez avoir des avions ou même des surhommes voler sur votre page Web si vous le souhaitez. La limite, c'est votre imagination.

C'est tout pour ce tutoriel. Je espère que vous l'apprécierez. Merci d'avoir lu!


Code
×