Aggiungi un effetto ripple d’acqua interattivo a qualsiasi sezione o elemento in Webflow — di quelli che reagiscono al cursore e distorcono dolcemente lo sfondo come la superficie di uno stagno — con zero codice e pieno controllo sull’aspetto. Gira su un leggero plugin jQuery con un po’ di magia WebGL sopra, avvolto in un sistema pulito basato su attributi così puoi usarlo e modificarlo anche se il JavaScript non è il tuo forte.
La parte più bella è che funziona già così com’è. Marca un elemento con un singolo attributo e ottieni subito dei default sensati — poi, se vuoi, apri un pannello live per rifinire la resa direttamente nel browser prima di riportare i tuoi valori preferiti in Webflow. Lo stesso identico setup scala da un singolo hero banner fino a un’intera galleria CMS.
E dato che gli effetti WebGL possono essere pesanti, arriva con le vie d’uscita che contano davvero: lo disabiliti su mobile con un attributo e dai ai visitatori un vero button toggle — con tanto di ARIA — così possono metterlo in pausa quando vogliono.
Come funziona
La regola che inganna tutti: l’effetto ha bisogno di un’immagine di sfondo. Il plugin usa WebGL per distorcere un’immagine di sfondo CSS — non un tag <img>, e nemmeno un’immagine dentro l’elemento. Quindi qualunque elemento vuoi far increspare deve avere l’immagine assegnata come background (con background-size: cover su una sezione, così riempie lo spazio e scala in modo pulito). Inserisci un’immagine nativa e non succederà nulla; è questo singolo dettaglio dietro alla maggior parte dei “perché non funziona”.
Un attributo, poi i default. Marca l’elemento bersaglio con FC-ripples="component" e basta davvero — lo script legge tre parametri (resolution, drop radius, perturbance) e ricade su default ragionevoli ogni volta che non li hai impostati. È voluto: puoi prototipare all’istante e rifinire solo quando ti va. Quando vuoi rifinire, aggiungi FC-ripples-config="qualcosa" e lo script genera un pannello GUI live etichettato con il tuo valore. Regoli gli slider nel browser, guardi l’acqua cambiare in tempo reale e — trovato il punto giusto — torni in Webflow, rimuovi l’attributo config e fissi i tuoi numeri come data-resolution, data-drop-radius e data-perturbance. Pulito, ottimizzato, pronto alla produzione, senza pannello che finisce ai visitatori.
Il trucco CMS è la parte furba. Un’immagine di sfondo non occupa spazio nel layout — non ha larghezza né altezza proprie — quindi se costruissi una galleria solo con immagini di sfondo, gli item collasserebbero. La soluzione: tieni un vero <img> in ogni item per definire dimensioni e proporzioni, poi sovrapponi un div overlay in posizione assoluta (tutti gli offset a 0, così copre l’item esatto) sopra di esso, lega il background dell’overlay allo stesso campo immagine del CMS e applica FC-ripples="component" all’overlay. Prendi il layout dall’immagine vera e l’effetto dal background — il meglio dei due mondi. Dato che Webflow non ti lascia configurare ogni item CMS singolarmente, metti FC-ripples="group" e FC-ripples-config="gallery" sulla Collection List stessa: lo script raccoglie ogni component dentro quel gruppo e li guida tutti da un unico pannello condiviso. È questo che tiene tutto gestibile anche con decine di item.
Performance e accessibilità sono integrate, non appiccicate. Il WebGL può essere esigente, quindi FC-ripples-disable-mobile dice allo script di saltare del tutto un component sugli schermi piccoli — e in quel caso nascondere il button toggle ha senso, perché non resta nulla da attivare. Quel toggle è un elemento button marcato FC-ripples="toggle" che mette in pausa e riprende l’effetto a runtime; porta un aria-label così gli screen reader annunciano cosa fa, e un aria-pressed che alterna tra true e false per comunicare lo stato attuale. Dare alle persone un modo chiaro per fermare gli effetti carichi di movimento è esattamente il tipo di controllo che offrono i siti fatti bene.
Come si usa
-
Clona il progetto. Prendi il progetto clonabile Webflow — include la struttura completa, entrambi gli esempi e un unico script commentato per intero (in Page Settings → Before
</body>) che carica il plugin jquery.ripples e lil-gui per i pannelli. Una tabella riassuntiva di ogni attributo sta in fondo alla pagina clonata. -
Sezione semplice. Dai a una sezione un’immagine di sfondo (
background-size: cover, non fixed, senza tiling), poi aggiungiFC-ripples="component". Pubblica e passaci sopra col cursore — hai già i ripple sui default. -
Regolala dal vivo (opzionale). Aggiungi
FC-ripples-config="hero"per aprire il pannello GUI etichettato sul sito live. Regola resolution, drop radius e perturbance finché non ti convince — guarda la tabella di configurazione qui sopra per cosa fa ciascuno e il suo intervallo utile. -
Fissa i tuoi valori. Rimuovi
FC-ripples-config, poi aggiungidata-resolution,data-drop-radiusedata-perturbancecon i numeri su cui ti sei fermato. Ora si carica pronto alla produzione, senza pannello. -
Galleria CMS. In ogni Collection Item, tieni il vero
<img>per il layout, aggiungi un div overlay (position: absolute, offset pieni, background legato all’immagine CMS,background-size: 100%) e marca l’overlayFC-ripples="component". Sulla Collection List, aggiungiFC-ripples="group"eFC-ripples-config="gallery"per controllare l’intero set da un solo pannello. -
Aggiungi le vie d’uscita. Metti
FC-ripples-disable-mobilesui component che non devono girare sui telefoni, e inserisci un verobuttonconFC-ripples="toggle"(piùaria-labelearia-pressed) così i visitatori possono mettere in pausa e riprendere l’effetto da soli.