Sistemi avanzati no-code in Webflow
Sistemi veri e riutilizzabili costruiti senza scrivere codice — popup video configurabili, dropdown che si aprono da soli, breadcrumb accessibili, gallerie trascinabili e sfondi interattivi da inserire e regolare.
16 lezioni
La distanza tra “so stilizzare una pagina in Webflow” e “so costruire un sistema vero” è più piccola di quanto sembri — e non devi diventare uno sviluppatore JavaScript per colmarla. Questo corso è una raccolta di build davvero utili e riutilizzabili: un popup video che configuri invece di programmare, dropdown che si aprono al caricamento o allo scroll, breadcrumb accessibili, gallerie trascinabili e sfondi interattivi. Ognuna arriva come cloneable, già collegata, così la inserisci e la regoli.
Il filo che le lega è sistemi invece di hack. Invece di trucchetti usa e getta, costruisci cose che restano pulite, accessibili e facili da riutilizzare tra progetti — i componenti che imposti una volta e a cui torni di continuo. Zero gatekeeping, niente “incolla questo e spera”: capirai cosa fa ogni pezzo e perché, così puoi piegarlo ai tuoi design.
In questo corso
- Sincronizza i campi input in Webflow in tempo reale Rispecchia un input Webflow in un altro in tempo reale con Mirror Input di Finsweet — anteprime live, saluti personalizzati e campi duplicati, senza codice.
- Apri i dropdown di Webflow in automatico con gli attributi Fai aprire i dropdown di Webflow da soli — al caricamento, allo scroll o al click su un link — con pochi attributi custom e zero JavaScript in più.
- Popup Video Custom in Webflow (No Code, Autoplay) Crea un popup video custom in Webflow senza codice: autoplay all'apertura, pausa alla chiusura, scroll lock e binding CMS — tutto con attributi custom.
- Aggiungi YouTube al tuo popup video in Webflow Aggiorna il tuo popup video custom in Webflow per riprodurre i video di YouTube: prendi il link embed giusto, abilita le JS API e ricolora l'icona play.
- Breadcrumb accessibili in Webflow (manuali + auto) Costruisci due sistemi di breadcrumb accessibili e riutilizzabili in Webflow — uno manuale che configuri a mano e uno automatico che legge l'URL per te.
- Lightbox Webflow con loop infinito (galleria accessibile) Potenzia la lightbox nativa di Webflow con la navigazione a loop infinito usando un solo attributo custom — funziona con galleria CMS o statica, su mobile, e resta pienamente accessibile.
- Grid gallery dinamica in Webflow (senza codice) Costruisci una grid gallery guidata dal CMS in Webflow dove ogni immagine mantiene il suo vero rapporto d'aspetto, senza ritagli — imposta le colonne per breakpoint con qualche attributo.
- Marquee infinito e trascinabile in Webflow (no code) Crea un marquee infinito e trascinabile in Webflow senza codice — solo attributi per direzione, velocità per breakpoint, pausa fluida al passaggio del mouse, CMS e accessibilità.
- Animazioni staggered GSAP in Webflow senza codice Aggiungi animazioni staggered di slide e fade a gallery, liste CMS e griglie in Webflow con GSAP — senza codice, solo pochi attributi per timing, easing e ordine.
- Crea card trascinabili in Webflow con GSAP (No Code) Crea in Webflow uno stack di card trascinabili e lanciabili con GSAP — scagliale via, resetta il mazzo e collegale persino ai contenuti del CMS.
- Ripple d'acqua interattivi su qualsiasi sezione Webflow Aggiungi un effetto ripple d'acqua no-code e configurabile a qualsiasi sezione o galleria CMS in Webflow — basato su jQuery + WebGL con un pannello GUI live per il tuning in tempo reale.
- Sfondo a gradiente fluido interattivo in Webflow Aggiungi uno sfondo a gradiente fluido in Webflow con un attributo custom — niente codice — e regola colori, velocità e reattività al mouse in tempo reale.
- Effetto Neon Glow Parametrico in Webflow Ricrea il neon glow retro di Webflow all'hover con un sistema parametrico basato su variabili CSS, color-mix() e variable modes intercambiabili — senza scegliere colori a mano.
- Effetto disintegrazione con GSAP in Webflow Crea in Webflow un effetto disintegrazione allo scroll con pochi attributi GSAP — niente codice da modificare, funziona con i contenuti CMS e resta accessibile.
- Effetto lente di vetro sui video in Webflow Trasforma il cursore in una lente di vetro sopra un video hero in Webflow — un effetto di distorsione cromatica su GPU che configuri con pochi attributi custom.
- Image sequence in scroll stile Apple (Webflow + GSAP) Ricrea l'animazione in scroll degli AirPods di Apple in Webflow: estrai i frame dal video, ospitali e guida la sequenza su un canvas con GSAP ScrollTrigger.