Susan est programmeuse et contributrice open source, actuellement spécialisée dans le développement frontend.
Meilleurs exemples de particules.js
Si vous êtes à la recherche d’exemples sympas de Particles.js, alors vous êtes au bon endroit ! Ces effets peuvent ajouter une merveilleuse touche d’animation à n’importe quel site Web, c’est pourquoi j’ai décidé de compiler une liste de certains des effets de particules les plus cool, y compris ceux avec des constellations, des animations de neige, des effets de scintillement et bien plus encore.
Ces animations peuvent également être utilisées comme arrière-plan pour les écrans d’inscription, les pages de destination et de nombreux autres contextes. Ou vous pouvez également les inclure dans les écrans de chargement !
Commençons!
Découvrez quelques-uns des meilleurs exemples de Particles.js dans cette liste ultime !
1. Bulles
L’un des effets d’animation de particules les plus cool est l’effet de bulle, où les particules montent lentement. Un fond dégradé bleu et violet frais est également ajouté comme toile de fond.
L’arrière-plan est disponible dans le pack d’arrière-plans d’Isotope UI, ainsi que de nombreux autres arrière-plans. Les quatre premiers arrière-plans de cette liste, ainsi que le septième, sont également disponibles dans le pack ! C’est une ressource fantastique si vous recherchez des effets de particules, et j’ai utilisé la bibliothèque pour mes propres projets Web.
Vous pouvez également ajouter des ondes SVG amusantes à la fin de l’écran, où les particules s’élèvent à partir d’une série d’ondes. Cet effet de particules est disponible dans le pack d’arrière-plan d’Isotope UI,
Voici un arrière-plan de quelques bulles flottantes. Aurait fière allure avec des vagues SVG ou un triangle SVG, aussi !
2. Carrés
Cette animation super cool présente des carrés qui s’élèvent lentement. C’est un arrière-plan assez serein et l’effet d’animation subtil serait un excellent moyen d’ajouter une touche dynamique aux sections de héros d’atterrissage, aux bannières et plus encore.
Je recommanderais certainement de vérifier cet arrière-plan si vous souhaitez également inclure un arrière-plan dégradé ainsi que des formes animées. L’animation peut également aider à augmenter le temps passé sur le site et ajoutera un aspect professionnel à n’importe quelle page Web !
Voici une démo sympa d’un arrière-plan animé avec des carrés qui montent !
3. Particules scintillantes
Cet arrière-plan présente une série de particules scintillantes, où l’opacité de chaque particule change lentement pour produire un effet cool qui donne l’impression que les particules se déplacent dans et hors de vue.
Cet arrière-plan est également disponible dans le cadre du pack d’arrière-plan d’Isotope UI (lié ci-dessus) et utilise la bibliothèque TsParticles. Cependant, vous pouvez également l’utiliser avec Particles.js, sauf que le fond dégradé linéaire doit être défini via CSS plutôt que via la configuration des particules.
L’exemple ci-dessous comporte également une série d’ondes SVG, qui est également incluse avec l’arrière-plan disponible. Les vagues SVG ajoutent un effet de séparateur de page, ce qui peut être utile pour les pages de destination ou les sections.
Voici une animation glorieuse avec des particules scintillantes !
Interface utilisateur isotopique
Créer des variantes
Assurez-vous d’expérimenter avec l’image d’arrière-plan de chaque animation de particules, en modifiant le dégradé ou les formes des particules. Vous pouvez créer de nombreuses variantes sympas de cette façon !
4. Constellations
Le site de démonstration officiel Particles.js propose également une merveilleuse gamme de démos que vous devriez également consulter, y compris une animation super cool de constellations ! Vous en verrez un exemple dans la démo ci-dessous, où les particules sont liées entre elles par des lignes, pour créer une animation super incroyable !
Dans le cadre de la démo, vous pouvez également ajuster la couleur ou l’image d’arrière-plan, ainsi que les propriétés des particules. Vous pouvez ensuite exporter la configuration une fois que vous avez un arrière-plan de particules que vous souhaitez inclure sur votre propre site Web.
Vous pouvez également créer une variation sur cet arrière-plan en modifiant la couleur d’arrière-plan du rouge à un dégradé linéaire. Ou vous pouvez aussi essayer un fond bleu foncé ! Les possibilités sont infinies, alors assurez-vous d’essayer de mettre à jour les couleurs d’arrière-plan et de lien.
Constellations sur fond bleu, réalisées avec Particles.js !
5. Neige
Si vous souhaitez ajouter une touche saisonnière et hivernale à votre site Web, pourquoi ne pas inclure une animation de particules de neige ?
Ceci est disponible dans le cadre du site de démonstration officiel de Particles.js (lien ci-dessus), et vous pouvez également utiliser les options de configuration infinies, telles que la mise à jour de la couleur d’arrière-plan. J’ai choisi une belle couleur bleue pour l’animation dans le GIF ci-dessous, car elle met magnifiquement en valeur la neige. Mais assurez-vous également d’essayer de nombreuses variantes. Par exemple, vous pouvez mettre à jour l’image d’arrière-plan afin qu’elle ait une image de pins et du ciel nocturne derrière. La neige aurait l’air glorieuse superposée sur cette image!
Voici un bel effet d’animation de neige, construit avec Particles.js !
6. Formes mobiles
Un autre type d’arrière-plan populaire consiste à déplacer des formes, qui se déplacent dans une direction horizontale, verticale ou diagonale.
Cet arrière-plan est disponible dans le cadre du site officiel de Particles.js, et tout comme les autres mentionnés ci-dessus, vous pouvez également mettre à jour la couleur ou l’image d’arrière-plan ainsi que toutes les propriétés des particules.
Pour ce type de fond particulier, pourquoi ne pas inclure un fond dégradé linéaire et des hexagones semi-opaques ? Cela pourrait faire une variante sympa !
Voici un merveilleux effet de particules avec des formes en mouvement !
7. Liens avec des points
Cet arrière-plan super cool présente des particules liées à des lignes, ainsi que des points dans une variété de couleurs, y compris le fuschia et le bleu ciel.
Cela ferait une toile de fond fantastique pour un formulaire de connexion ou un écran d’inscription. Par exemple, vous pouvez ajouter le formulaire au centre de la page et avoir la toile de fond derrière. Ou vous pouvez également l’utiliser pour un écran de chargement ! Il y a tellement de cas d’utilisation possibles pour cela dans l’ensemble, alors assurez-vous de l’essayer dans différents contextes pour voir où cela fonctionnerait le mieux.
Voici un effet constellation avec de belles couleurs !
Meilleurs exemples de particules.js
8. Fond dégradé
Si vous souhaitez créer un arrière-plan super esthétique, pourquoi ne pas incorporer un dégradé à l’arrière-plan ? Je recommanderais certainement d’essayer une variété de dégradés pour vos arrière-plans afin de créer des variantes sympas. Des bleus profonds et des violets riches aux roses et oranges vifs, il y a tellement de possibilités.
Vous pouvez ajouter des dégradés via CSS et modifier la propriété background-image si vous utilisez Particles.js. Ou si vous utilisez TsParticles, vous pouvez définir directement l’image d’arrière-plan dans la configuration de la particule, plutôt que de la définir en externe dans le CSS. Si vous souhaitez générer des dégradés linéaires, j’ai rédigé ici un guide des meilleurs outils de génération de dégradés CSS.
Ce fond a un joli dégradé!
J’espère que vous avez découvert quelques bons exemples Particles.js !
Merci beaucoup d’avoir lu, j’espère que vous avez découvert d’excellents exemples de Particles.js dans cette liste ! Les configurations peuvent également être utilisées pour tsParticles, et je vous recommande d’utiliser cette bibliothèque si vous souhaitez ajouter des effets de particules à vos projets React, Vue, Angular ou JS. Des composants spécifiques sont également disponibles pour les frameworks JS, ce qui vous permet d’ajouter rapidement ces effets avec un seul composant.
Les animations de particules peuvent être un excellent moyen d’aider à engager les visiteurs sur votre site, et également d’augmenter le temps passé sur le site. Ceux-ci peuvent être utilisés dans toute une gamme de contextes, des écrans d’inscription aux héros de débarquement et bien plus encore. J’ai toujours été un grand fan des effets de particules, ils peuvent ajouter une si belle addition à n’importe quel site !
Merci encore de votre lecture et je vous souhaite le meilleur en ajoutant une animation de particules à votre site Web ou à votre projet !
Ce contenu est exact et fidèle au meilleur de la connaissance de l’auteur et ne vise pas à remplacer les conseils formels et individualisés d’un professionnel qualifié.
