Dévoilée lors de la Webflow Conf 2023, la nouvelle intégration native de Spline transforme la manière dont vous pouvez utiliser la 3D dans vos projets Webflow. Découvrez comment →
C'était l'une des grosses annonces de la Webflow Conf 2023 : il est maintenant possible d'intégrer nativement la 3D sur vos projets Webflow, via une intégration Spline.
Dans le tutoriel d'aujourd'hui, découvrez :
- Comment exporter et intégrer votre fichier Spline dans Webflow, en suivant les meilleures pratiques.
- Les différentes façons d'utiliser Spline dans vos projets Webflow.
Les outils utilisés dans ce tutoriel :
→ Spline, Webapp de modélisation 3D. Découvrir Spline
→ Webflow, outil de développement web low-code Découvrir Webflow
1. Guide d'intégration de Spline à Webflow :
Quelques étapes à suivre afin de bien préparer votre fichier 3D Spline, pour une intégration Webflow.
1.1 Comment exporter un fichier 3D depuis Spline ?
- Renommer les éléments : Avant toute chose, assurez-vous de donner des noms explicites à tous les objets dans votre scène 3D sur Spline. Cela facilitera l'animation et l'utilisation future des éléments dans Webflow.
- Auto-Zoom : Allez dans les paramètres de votre projet et activez l'Auto-Zoom. Choisissez "YES". Cela rendra votre "Frame 3D" responsive.
- Bouton Export : Cliquez ensuite sur le bouton "Export" en haut à droite.
- Onglet Viewer/Play Settings : Ici, désactivez le "Background Color" pour un rendu transparent et ajustez les autres paramètres selon vos besoins.
- Copier l'URL : Depuis l'onglet Viewer ou Code Export - Copier l'URL commençant par prod.spline.design/
Bonus - Audit de performance Spline: Avant de quitter Spline - et de procéder à l'intégration web - sachez qu'il existe un audit natif de performance de votre création 3D, qui vous propose un diagnostic et des recommandations d'optimisations.
1.2 Comment importer votre design 3D sur votre site Webflow ?
1. Ajouter l'élément Spline Scene: Une fois dans votre interface Webflow, ajoutez un nouvel élément et choisissez d'intégrer "Spline scene".
2. Coller l'URL: Prenez l'URL que vous avez copiée depuis Spline et collez-la dans le champ URL de l'élément "Spline scene".
3. Attribuer une classe à votre élément: Afin de positionner comme vous le souhaitez l'élément 3D dans votre projet Webflow, attribué lui une classe et des styles CSS.
Et voilà 🥳
2. Comment utiliser la 3D avec Spline sur son site Webflow ?
⚠️ Attention à l'impact sur les performances : Intégrer des éléments 3D peut ralentir le temps de chargement de votre site. Assurez-vous d'optimiser votre création autant que possible.
L'intégration native de Spline dans vos projets Webflow vous permet désormais de créer des expériences personnalisables et immersives, directement depuis l'interface du Designer Webflow, et sans ajout de custom code. Parmi les possibilités natives :
- Intégrer et positionner des scènes 3D : Placez vos éléments 3D exactement où vous le souhaitez sur votre site Webflow grâce aux classes CSS.
- Animer vos éléments 3D : Utilisez le panneau d'interaction de Webflow pour créer des animations JavaScript avec divers déclencheurs, tels que le hover, le scroll, le chargement, le clic, etc.
- Créer des interactions avec d'autres éléments HTML (Ex: Bouton, Div, etc...)
En résumé : la flexibilité de personnalisation offerte par Webflow, combinée à la magie de la 3D, ouvre de nouvelles dimensions pour vos projets web.
Nos ressources complémentaires
Pour aller plus loin 😁
#Debrief Webflow Conf 2023
Envie d'en apprendre plus sur le repositionnement de la plateforme Webflow vers la création de site web professionnel (et de ses nouvelles fonctionnalités) ?
→ Replay denotre débrief complet de la Webflow Conf 2023
#Apprendre à bien utiliser Spline sur Webflow
La 3D est un sujet passionnant. Afin d'en apprendre plus sur les possibilités qu'offre Spline, découvrez prochainement de nouvelles vidéos sur "Comment utiliser Spline sur vos sites Webflow" sur la chaîne YouTube de Digidop
→ Accéder à la chaîne YouTube spécialisée sur les nouvelles tendances en Webdesign, Digidop
.jpg)
