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