Il y a quelques mois je vous parlais de la bibliothèque ThreeJS qui permet de créer des scènes et animations en Javascript dans cet article.

Aujourd'hui laissez-moi vous présenter Vanta.js, une bibliothèque basée sur ThreeJS et permettant de créer de jolis animations interactives utilisables pour les fonds de vos sites web.

Cette bibliothèque s'occupe de :

• Gérer le rendu et les animations
• Se placer directement en tant que background de l'élément assigné
• Adapter la taille de l'animation selon la taille de l'élément parent
• Proposer des options de personnalisation (couleurs, taille, nombre d'éléments,...)
• ...

Voici un exemple de rendu par défaut de Vanta.js :

L'utilisation est très simple, voici le script utilisé pour le rendu ci-dessus :

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js"></script>
<script>
VANTA.HALO({
  el: "#vanta",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  size: 2.50
})
</script>

Vous pourrez découvrir tous les rendus et les options de personnalisation possibles directement sur le site officiel :

Vanta.js - 3D & WebGL Background Animations For Your Website

Gallery of customizable plug & play animated backgrounds using three.js

Animated 3D Backgrounds For Your Website

Il faudra néanmoins faire attention car ThreeJS + VantaJS pèsent environs 600Ko (minifié, sans gzip), donc je vous inviterai à choisir cette solution uniquement si cela apporte vraiment quelque chose à vos réalisations et à ne pas en abuser car cela peut ralentir le chargement et le framerate de votre site...

De plus, certaines animations ne sont pas compatibles avec tous les appareils mobiles, pensez donc à utiliser une couleur ou une image statique en fallback.

J'espère que cet article vous aura été utile, et à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !