Heute werden wir lernen, wie man mit Swiper JS und GSAP einen benutzerdefinierten Slider in Webflow erstellt! Außerdem erfährst du, wie du benutzerdefinierten Code mit der Codesandbox implementieren kannst - was ich sehr empfehlen kann! Dies ist ein Einsteiger-Tutorial.
Falls du Webflow noch nicht kennst: Webflow ist ein Drag-and-Drop-Website-Builder, mit dem du responsive Websites ohne Programmierkenntnisse erstellen kannst. Aber dieses Mal werden wir Webflow ein bisschen aufpeppen, indem wir ein bisschen eigenen Code hinzufügen. Also lass uns loslegen! Der Slider Transition ist eine großartige Möglichkeit, deiner Website ein bisschen mehr Schwung zu verleihen. Er kann den Nutzern ein cooles, interaktives Erlebnis bieten, das sie länger auf der Seite hält. In diesem Tutorial geht es darum, wie du mit Swiper JS und GSAP einen interessanten Slider-Übergang erstellen kannst.
Lass mich wissen, ob du heute etwas gelernt hast!
🚀 Schau dir Webflow an:
(Affiliate-Link zur Unterstützung des Channels ❤️)
🧑🏾💻 Link zum erwähnten Code-Snippet:
Du lernst etwas über:
👉 Webflow-Animationen
👉 Wie man einen vertikalen Scroll Snap erstellt
👉 Wie du Swiper.js und GSAP verwendest
👉 Wie du die Codesandbox verwendest
⏲️ Zeitstempel
00:00 - Einführung
00:35 - Überblick
01:20 - Swiper-Struktur
02:20 - Webflow-Struktur
09:07 - Implementiere Codesandbox in dein Webflow-Projekt
13:00 - Erstelle deine Animation mit Swiper & GSAP
19:03 - Wie GSAP funktioniert
.jpg)
.jpg)
.jpg)