Maison > Article > interface Web > Explication détaillée de l'utilisation de ParticlesJS
Explication détaillée de l'utilisation de ParticlesJS
- php中世界最好的语言original
- 2018-04-17 16:53:453258parcourir
Cette fois, je vais vous apporter une explication détaillée de l'utilisation de ParticlesJS. Quelles sont les précautions lors de l'utilisation de ParticlesJS. Voici des cas pratiques, jetons un coup d'oeil.
particules.js
Une bibliothèque JavaScript légère pour créer des particules.
Une bibliothèque JavaScript légère pour créer des arrière-plans de particules
Voici donc comment utiliser particules.js.
particulesJS est open source sur Github : https://github.com/VincentGarreau/particles.js
Une démo est fournie dans ce projet. Vous pouvez directement télécharger ce projet et ouvrir le fichier index.html dans la démo pour voir l'effet.
Alors, si nous voulons construire notre propre projet, comment importer les fichiers ?
Les suggestions sont les suivantes :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>particles.js</title> <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles."> <meta name="author" content="Vincent Garreau" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="stylesheet" media="screen" href="css/style.css" rel="external nofollow" > </head> <body> <p id="particles-js"></p> <!-- scripts --> <script src="js/particles.js"></script> <script src="js/app.js"></script> </body> </html>
particules.js est sa bibliothèque, il faut l'importer, app.js est le paramètre fichier de configuration , il faut aussi l'importer, mais il n'est pas nécessaire d'importer stats.js dans la démo.
Nous pouvons également introduire style.css, la couleur de fond est définie en CSS.
Sur la base de ce modèle, nous pouvons ajouter les fonctions que nous souhaitons implémenter, telles que les fonctions d'enregistrement et de connexion. Ce qu'il faut noter est :
Utilisez p pour encapsuler le bloc de code fonctionnel que nous voulons implémenter, et définissez ce p dans. css Positionnement absolu.
Ce qui suit présente l'utilisation du fichier de configuration des paramètres app.js :
particules.number.value : Nombre de particules
particules.number.density : La densité des particules
particules.number.density.enable : Activer la densité des particules (vrai ou faux)
particules.number.density.value_area : L'espace occupé par chaque particule (disponible uniquement lorsque la densité des particules est activée)
particules.color.value : La couleur des particules (prend en charge l'hexadécimal "#b61924", rgb "{r:182, g:25, b:36}", hsl et aléatoire)
particules.shape.type : La forme des particules ("cercle" "bord" "triangle" "polygone" "étoile" "image")
particules.opacity.value : Transparence des particules
particules.size.anim.enable : s'il faut activer la vitesse des particules (vrai/faux)
particules.size.anim.speed： Fréquence d'animation des particules
particules.size.anim.sync : indique si la vitesse de course et l'animation des particules sont synchronisées
particules.move.speed : vitesse de déplacement des particules
Vous pouvez configurer votre arrière-plan préféré en fonction de ces fichiers de configuration. Deux fichiers de configuration complets app.js sont fournis ci-dessous.
Profil 1 (fond classique) :
{
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "polygon",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
}
Fichier de configuration deux (fond de ciel étoilé) :
{
"particles": {
"number": {
"value": 160,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !
Lecture recommandée :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!