Soluzioni Webflow guidate dagli attributi
Una cassetta degli attrezzi di effetti Webflow che controlli interamente con attributi custom — configuri il comportamento nel Designer, senza JavaScript da scrivere o modificare.
15 lezioni
Gli attributi custom sono il superpotere più silenzioso di Webflow. Invece di incollare script che non capisci fino in fondo sperando che nulla si rompa, inserisci un piccolo pezzo di codice una volta e comandi tutto dal Designer — nomi e valori di attributi che imposti sugli elementi, proprio dove stai già lavorando. Cambi una durata, inverti un comportamento, colpisci un altro elemento: niente codice da modificare, niente ripubblicazioni.
Questo corso è un’intera cassetta degli attrezzi costruita così — popup video, dropdown che si aprono da soli, marquee trascinabili, ripples, sfondi con gradienti e altro, ognuno configurato solo tramite attributi. Ogni lezione arriva con un cloneable e una tabella di riferimento chiara per ogni attributo che espone, così sai esattamente quale leva fa cosa. È la via più rapida a effetti che sembrano su misura ma restano manutenibili — senza copia-incolla, e davvero tuoi da regolare.
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 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.