Des animations interactives pour vos sites web

Vous cherchez à ajouter ces fameux fonds animés et interactifs pour votre site ? Voici une bibliothèque faite pour ça !

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 :

Vanta.js - 3D & WebGL Background Animations For Your Website
Gallery of customizable plug & play animated backgrounds using three.js

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 !

Les articles les plus populaires du blog

Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !

Voir la sélection 🚀

Recevez les articles de la semaine par e-mail pour ne rien manquer !

S'abonner à la newsletter 📧

À 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 !