Des animations interactives pour vos sites web

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 :

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.