Aujourd'hui, nous allons apprendre à créer une transition de curseur personnalisée dans Webflow en utilisant Swiper JS et GSAP ! Tu apprendras également à implémenter du code personnalisé à l'aide de la codesandbox - que je te recommande vivement ! Il s'agit d'un tutoriel pour débutants.
Si tu ne connais pas Webflow, c'est un constructeur de sites Web par glisser-déposer qui te permet de créer des sites Web réactifs sans aucun codage. Mais cette fois-ci, nous allons suralimenter Webflow en ajoutant un peu de code personnalisé. C'est parti ! La transition du curseur est un excellent moyen d'ajouter un peu de piquant à ton site Web. Elle peut donner aux utilisateurs une expérience cool et interactive qui les fera rester plus longtemps sur la page. Ce tutoriel particulier se concentrera sur la façon de créer une transition de curseur intéressante en utilisant Swiper JS et GSAP.
Dis-moi si tu as appris quelque chose aujourd'hui !
🚀 Jette un coup d'œil à Webflow :
(Lien d'affiliation pour soutenir la chaîne ❤️)
🧑🏾💻 Lien vers l'extrait de code mentionné :
Tu apprendras :
👉 Les animations Webflow
👉 Comment créer un snap de défilement vertical
👉 Comment utiliser Swiper.js et GSAP
👉 Comment utiliser la Codesandbox
⏲️ Timestamps
00:00 - Intro
00:35 - Vue d'ensemble
01:20 - Structure de Swiper
02:20 - Structure de Webflow
09:07 - Implémenter Codesandbox dans ton projet Webflow
13:00 - Créer une animation avec Swiper et GSAP
19:03 - Comment fonctionne GSAP
.jpg)
.jpg)
.jpg)