...correzione, il css sicuramente é da inserire nell'oggetto html passa su ESPERTO - CODICE CSS

inserisco un link di prova

https://www.italbest.cz/prova/

sotto il menu ho inserito il codice html, l effetto non funziona ...(la parte in Js , non so dove inserirla...posso provare in proprietá della pagina..)

Ciao Alessandro, qualche volta ho utilizzato i codici e realizzato qualche oggetto free per website

https://giancawordpress.altervista.org/

di solito il Js è un file che va caricato nella sezione Esperto dell'oggetto HTML

il JS Lo devi richiamare da Esperto. Il puntamento lo trovi nel progetto codepen casella centrale - ingranaggio. L'effetto lo vedi solo in rete in locale no.

Io solitamente scarico tt il progetto e poi la cartella JS la metto nella directory del progetto e la richiamo da Esperto.

Ciao Giancarlo, ti ringrazio del tuo link (non lo conoscevo), sarebbe interessante aggiornarlo anche con l effetto  liquid masking..pero comprendo che serve tempo libero :)

Per Giancarlo e Roberto 

c´é ancora qualche passaggio che mi sfugge :)

concettualmente sembra chiaro ma praticamente serve un po di competenza per i giusti settaggi...

premessa: il file js lo posso copiare da https://codepen.io/ con la classica funzione copia incolla, inserirlo su block notes e salvarlo nel formato js?

1- html - esperto - aggiungi si apre la seguente tabella:

nella prima sezione ho inserito il mio file prova-file.js

(presente sul mio pc, creato con la procedura copia incolla block notes, salvato nel formato js).

Nella seconda sezione inserisco il percorso di destinazione del mio file? Pensavo di inserirlo dentro gallery.

é corretto il percorso www/gallery  o devo inserire /www/gallery o solo /gallery?

settando tutto correttamente dovremmo riuscirci..

grazie 

se la cartella si chiama pippo masta srivere semplicemente pippo, metti il flag su Collega il file

esempio...

Ciao Giancarlo, ho eseguito il lavoro senza arrivare all obiettivo.. č é qualche errore..

cosí ho ripetuto tutta la procedura, ripulito la cartella di prova del server e caricato il web sul dominio https://www.italbest.cz/prova

nell home č é una striscia nera (non visualizzo la mia immagine di prova) editata dentro il file html

<div class="content">
<img src="https://www.italbest.cz/gallery/sicily-red-611.png"/>
</div>

il link www.italbest.cz/gallery/sicily-red-611.png é funzionante.

...sto cercando di capire dove posso aver sbagliato..., nel caso in cui avessi tempo, puoi fare tu una prova?

Vorrei capire se sto sbagliando io (probabilmente la procedura del file .js)...e se a te funziona tutto...

Io ho inserito e editato html, in esperto ho inserito il file css ed ho aggiunto il file che ho chiamato liquid.js dentro la mia cartella del server gallery.

Controllando la cartella gallery, il file non é presente...

Ciao Alessandro, non ho testato questo effetto anche perchè a vederlo su codepen mi sbaglierò, ma sembra bloccato lo scroll di pagina e a parte questo, non è di mio interesse.

Non vorrei che tu devessi mettere mano al codice per adattarlo ed eliminare qualche conflitto con script nativi di website, ma ripeto io purtroppo non l'ho testato.

ok Giancarlo, non č é problema, in ogni caso mi hai fornito info utili, ti ringrazio.

Alessandro, come già ti ha detto Roberto, controlla che, oltre al codice JS presente nell'editor dopo HTML e CSS, non ci sia anche qualche URL che richiami del codice JS nella sezione raggiungibile dall'icona dell'ingranaggio (vedi screenshot n.1). Non è comunque il caso della tua animazione a quanto vedo, ma la regola vale nel caso ci fosse in qualche altra animazione. In quel caso l'URL che vedi nella sezione JS dopo aver cliccato sull'ingranaggio, lo devi copiare e incollare come PRIMA RIGA in assoluto all'interno della sezione "Codice HTML" dell'Oggetto Codice HTML (vedi screenshot n.2) facendo attenzione ad inserirlo in questo modo:

<script src="Qui URL prelevato dalla sezione ingranaggio/JS"></script>

SCREENSHOT n.1

SCREENSHO n. 2

P.S. naturalmente se hai più di un URL che richiama codice JS nella sezione ingranaggio, devi creare tante righe singole quanti sono gli URL come da screenshot n. 2 (una riga per ogni URL, sempre aall'inizio, come prime righe in assoluto rispetto al restante codice HTML che aggiungerai subito dopo).

Ripeto, non è il caso dell'animazione scelta da te ma le info che ti ho dato potrebbero esserti utili per altre animazioni. Ciao

Grazie Giuseppe, mi ero accorto delle impostazioni di codepen.io e volevo avere una struttura indipendente dal loro software...domani studiero´ quanto mi hai scritto.

Codepen.io offre spunti molto interessanti, anche per x5, é un peccato non sfruttarli...poi quelli bravi riuscirebbero anche a svilupparli, migliorarli e potenzialmente potrebbero avere vantaggi nei propri siti personali o in quelli di potenziali clienti :)

ciao e come sempre...grazie 1000

Giuseppe, a titolo di curiositá t invio un breve aggiornamento...ho verificato quanto mi hai scritto, probabilmente tu vedi il link indicato al tuo punto 3 (quello di colore rosso..) perché hai la versione pro...

in ogni caso, mi hai fornito delle indicazioni importanti. 

nella mia cartella gallery del server, ho inserito il mio file .js.

Nel codice html seguendo il tuo consiglio (da me personalizzato..) ho provato a richiamare il file liquid.js

<script src="https://www.italbest.cz/gallery/liquid.js"></script>

non funziona, pero  (se non erro) credo che sia un passo importante verso il traguardo, perché il file .js da qualche parte deve essere richiamato...

Alessandro, nel caso dell'animazione scelta da te (Liquid masking), come ti avevo già scritto, NON c'è l'URL da richiamare nel codice di Website X5 (non ho la versione Pro di CodePen). Ti volevo dare delle indicazioni in più nel caso tu voglia sperimentare altri effetti di CodePen che potrebbero (ma non è detto!) contenere quegli URL del punto 3 del mio screenshot (io infatti nel mio esempio avevo preso un altro effetto diverso da quello che vuoi implementare tu, ecco perchè c'era quell'URL da richiamare nel codice di Website X5).

Per richiamare il tuo codice JS, fai come ti ha detto Giancarlo spuntando la casella "Collega il file (solo per file .js e .css)" e poi Inserisci nel tuo progetto il codice HTML fornito da CodePen nella sezione "Codice HTML" dell'Oggetto HTML e il codice CSS di CodePen nella sezione "Esperto" sempre dell'Oggetto HTML di Website X5.

Ciao Giuseppe, avevo giá eseguito la tua procedura purtroppo senza successo...appena posso faro un altro tentativo, nel caso in cui avessi commesso qualche errore in precedenza...

grazie di tutto

l effetto funziona, si funziona male, manda in conflitto tutta l home :)

 anche lo scroll di pagina si blocca :)

probabilmente con un po di esperienza si possono eliminare i conflitti, attualmente non vale la pena perderci tempo...se in futuro qualcuno riesce a far funzionare l effetto Webgl liquid masking scriva un nuovo post.

grazie a tutti

Infatti come scritto sopra, ma questo accade anche su codepen quindi è così il codice 

... sul mio pc quel LINK segnalato non funziona e non vedo niente, metà schermo nero e metà bianco...

... comunque sia, ...con il mio storico metodo, "L'uovo di Colombo", ...lanciato cinque lustri fa ai tempi della v.9, DIV_CUSTOM+IFRAME EXTRA, ormai usato ovunque, si può incorporare qualsiasi risorsa EXTRA di terze parti con un click, senza sbattimenti si sorta e senza conflitti con la pagina ospite...
... unico requisito richiesto è quello di essere capaci di realizzare la pagina indipendente dal progetto seguendo il tutorial della fonte...

.

Ciao KolAsim, hai un link?