Trasforma i progetti dei tuoi clienti con i nostri effetti WebGL, progettati per trasformare gli sfondi multimediali in uno spettacolo. Questi effetti coinvolgono i visitatori del sito garantendo prestazioni ottimali. Scegli tra una varietà di fantastici preset, modifica le loro proprietà e decidi come si attivano: automaticamente durante lo scorrimento o tramite il movimento del mouse del visitatore.
Aggiungere un effetto WebGL
Vai al pannello Ispezione per aggiungere un effetto WebGL allo sfondo di una sezione multimediale. Puoi scegliere tra vari preset, a seconda dell'aspetto e dell'interazione che vuoi ottenere.
Per aggiungere un effetto WebGL:
- Aggiungi un'immagine o un video sullo sfondo della sezione pertinente
Nota: gli effetti WebGL non sono supportati per gli sfondi GIF, così come per gli sfondi multimediali impostati per adattarsi ai riquadri
- Seleziona la sezione nell'area di lavoro
- Applica un effetto WebGL:
- Clicca sull'icona Apri Ispezione
in alto a destra dell'Editor 
- Clicca sulla scheda Animazioni ed effetti
- Clicca su + Aggiungi sotto Effetti WebGL
- Seleziona un effetto dall'elenco
Personalizzare un effetto WebGL
Personalizza gli effetti WebGL per perfezionarne l'aspetto e il comportamento, sia che tu stia aggiungendo lievi distorsioni o movimenti audaci e dinamici. Ogni effetto viene fornito con il proprio set di impostazioni regolabili, come intensità, velocità e direzione, che ti danno il pieno controllo su come interagisce con i tuoi contenuti.
Per determinati effetti, puoi anche decidere cosa li attiva sul sito del tuo cliente: autoplay, scorrimento, movimento del mouse o una combinazione di più azioni.
Per personalizzare un effetto WebGL:
- Seleziona la sezione pertinente
- Clicca sull'icona Apri Ispezione in alto a destra dell'Editor
- Clicca sulla scheda Animazioni ed effetti
- Clicca sull'effetto che vuoi modificare
- Clicca su Regola animazione per modificarne le impostazioni:
- Dimensione puntatore: trascina il cursore per modificare l'area che risponde all'effetto quando un visitatore passa il mouse sullo sfondo della sezione. Aumentando l'area si rende l'effetto più visibile, mentre diminuendola si mantiene l'area più a fuoco
- Interferenza: trascina il cursore per controllare il livello dell'interferenza. Aumentare l'interferenza rende l'effetto più strutturato e distorto
- Velocità puntatore: trascina il cursore per controllare la velocità con cui il movimento segue il mouse quando un visitatore passa il mouse sullo sfondo della sezione
- Intensità: trascina il cursore per controllare l'intensità dell'effetto. Aumentare l'intensità rende lo sfondo della sezione più deformato quando i visitatori passano il mouse su di essa
- Dimensione puntatore: trascina il cursore per modificare l'area che risponde all'effetto quando un visitatore passa il mouse sullo sfondo della sezione. Aumentando l'area si rende l'effetto più visibile, mentre diminuendola si mantiene l'area più a fuoco
- Velocità puntatore: trascina il cursore per controllare la velocità con cui il movimento segue il mouse quando un visitatore passa il mouse sullo sfondo della sezione
Nota: le impostazioni disponibili possono variare a seconda dei trigger scelti.
- Trigger: seleziona uno o più trigger per attivare l'effetto: autoplay, movimento del mouse o scorrimento. Aggiungi altri trigger cliccando sull'icona Aggiungi
e rimuovi un trigger cliccando sull'icona Rimuovi 
accanto ad esso
- Direzione: decidi la direzione dell'effetto: orizzontale o verticale
- Duplica: trascina il cursore per controllare il modo in cui l'effetto acquisisce le nuove linee dallo sfondo dell'immagine o del video. Aumentando i duplicati l'effetto sarà più dinamico, mentre diminuendoli la trasformazione sarà più lenta
- Velocità puntatore: trascina il cursore per controllare la velocità con cui il movimento segue il mouse quando un visitatore passa il mouse sullo sfondo della sezione
- Velocità autoplay: trascina il cursore per controllare la velocità di spostamento delle linee
- Colori: scegli i colori che si fondono e si mescolano per creare l'effetto globo (Tutti, Verde e magenta, ecc.)
- Angolo colore: trascina il cursore per impostare l'angolo di fusione e transizione dei colori
- Dimensione puntatore: trascina il cursore per modificare l'area che risponde all'effetto quando un visitatore passa il mouse sullo sfondo della sezione. Aumentando l'area si rende l'effetto più visibile, mentre diminuendola si mantiene l'area più a fuoco
- Interferenza: trascina il cursore per controllare il livello dell'interferenza. Aumentare l'interferenza rende l'effetto più strutturato e distorto
- Velocità puntatore: trascina il cursore per controllare la velocità con cui il movimento segue il mouse quando un visitatore passa il mouse sullo sfondo della sezione
- Ampiezza onda: trascina il cursore per regolare la larghezza delle increspature dell'onda, in modo che si espandano o si contraggano
- Intensità: trascina il cursore per controllare l'intensità dell'effetto. Aumentare l'intensità rende le onde più drammatiche e più facili da vedere
- Interferenza: trascina il cursore per controllare il livello dell'interferenza. Aumentare l'interferenza rende l'effetto più strutturato e distorto
- Velocità autoplay: trascina il cursore per controllare la velocità di movimento delle increspature
Nota: le impostazioni disponibili possono variare a seconda dei trigger scelti.
- Trigger: seleziona uno o più trigger per attivare l'effetto: autoplay, movimento del mouse o scorrimento. Aggiungi altri trigger cliccando sull'icona Aggiungi e rimuovi un trigger cliccando sull'icona Rimuovi accanto ad esso
- Colori: scegli i colori che creano l'effetto diviso. (Tutti, Verde e magenta, ecc.). Questi colori vengono visualizzati come livelli frammentati sopra lo sfondo della sezione
- Offset canale: trascina il cursore per regolare l'allineamento dei canali del colore. Aumentando l'offset, i colori vengono separati e sfocati, creando un effetto più intenso e psichedelico
- Angolo: trascina il cursore per impostare l'angolo con cui i colori vengono ruotati all'interno dell'effetto
- Dimensione puntatore: trascina il cursore per modificare l'area che risponde all'effetto quando un visitatore passa il mouse sullo sfondo della sezione. Aumentando l'area si rende l'effetto più visibile, mentre diminuendola si mantiene l'area più a fuoco
- Interferenza: trascina il cursore per controllare il livello dell'interferenza. Aumentare l'interferenza rende l'effetto più strutturato e distorto
- Velocità puntatore: trascina il cursore per controllare la velocità con cui il movimento segue il mouse quando un visitatore passa il mouse sullo sfondo della sezione
- Velocità autoplay: trascina il cursore per controllare la velocità di spostamento dei colori
Rimuovere un effetto WebGL
Puoi sempre rimuovere un effetto WebGL che hai aggiunto in precedenza allo sfondo di una sezione.
Per rimuovere un effetto WebGL:
- Seleziona la sezione pertinente
- Clicca sull'icona Apri Ispezione in alto a destra dell'Editor
- Clicca sulla scheda Animazioni ed effetti
- Clicca sull'icona Altre azioni
accanto all'effetto WebGL
- Seleziona Rimuovi
FAQ
Clicca su una domanda qui sotto per saperne di più sugli effetti WebGL nell'Editor Studio.
Gli effetti WebGL funzionano sui dispositivi touchscreen?
Alcuni effetti WebGL richiedono un mouse, quindi non verranno mostrati sui dispositivi touch:
- Interferenza, Sfera RGB e Liquido possono essere attivati solo dal movimento del mouse. In questo caso, puoi passare a un effetto diverso per risolvere il problema
- In Slit-scan e Sdoppia RGB, scegli cosa attiva l'effetto. Se il movimento del mouse è l'unico trigger, l'effetto è disabilitato sui dispositivi touch. Per far apparire l'effetto, aggiungi un altro trigger (es. Autoplay)
- L'effetto Increspature è impostato per la riproduzione automatica su qualsiasi dispositivo, quindi appare sui touchscreen senza bisogno di alcuna azione da parte tua
Perché l'opzione per aggiungere effetti WebGL è disattivata nel mio Editor?
I motivi potrebbero essere diversi:
- Potresti aver aggiunto uno sfondo GIF, che non supporta gli effetti WebGL
- Potresti aver impostato lo sfondo multimediale su Riquadri (sotto Opzioni di adattamento)
Per modificare l'adattamento dello sfondo:
- Seleziona la sezione pertinente
- Clicca sull'icona Apri Ispezione in alto a destra dell'Editor
- Scorri verso il basso fino a Opzioni di adattamento sotto Design
- Seleziona Dimensione originale o Adatta per riempire
