WebSite X5Help Center

 
Alessandro R.
Alessandro R.
User

Webgl liquid masking - effetto  it

Autore: Alessandro R.
Visite 921, Followers 3, Condiviso 0  

Ciao, vorrei inserire il seguente effetto in x5

https://codepen.io/ksenia-k/pen/dyaeGgO

Premessa - qualcuno che lavora con codepen puo  confermarmi che la risorsa sia gratuita?

il codice ha 3 sezioni.

la prima la inserisco nell oggetto html

il css immagino in proprietá della pagina (proprietá del tag body?)...

sul Js ...avrei bisogno di qualche indicazione :)

l effetto é carino e se la risorsa fosse open source come credo, altri utenti la potrebbero usare per rendere piu attraente il web.

Vi ringrazio in anticipo

Postato il
23 RISPOSTE - 2 UTILI
Alessandro R.
Alessandro R.
User
Autore

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

Leggi di più
Postato il da Alessandro R.
Alessandro R.
Alessandro R.
User
Autore

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..)

Leggi di più
Postato il da Alessandro R.
Giancarlo B.
Giancarlo B.
User

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

Leggi di più
Postato il da Giancarlo B.
Roberto M.
Roberto M.
User

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.

Leggi di più
Postato il da Roberto M.
Alessandro R.
Alessandro R.
User
Autore

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 :)

Leggi di più
Postato il da Alessandro R.
Alessandro R.
Alessandro R.
User
Autore

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 

Leggi di più
Postato il da Alessandro R.
Giancarlo B.
Giancarlo B.
User

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

Leggi di più
Postato il da Giancarlo B.
Giancarlo B.
Giancarlo B.
User

esempio...

Leggi di più
Postato il da Giancarlo B.
Alessandro R.
Alessandro R.
User
Autore

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...

Leggi di più
Postato il da Alessandro R.
Giancarlo B.
Giancarlo B.
User

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.

Leggi di più
Postato il da Giancarlo B.
Alessandro R.
Alessandro R.
User
Autore

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

Leggi di più
Postato il da Alessandro R.
Giuseppe Guida
Giuseppe Guida
User

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

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

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

Leggi di più
Postato il da Giuseppe Guida
Alessandro R.
Alessandro R.
User
Autore

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

Leggi di più
Postato il da Alessandro R.
Alessandro R.
Alessandro R.
User
Autore

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...

Leggi di più
Postato il da Alessandro R.
Giuseppe Guida
Giuseppe Guida
User

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.

Leggi di più
Postato il da Giuseppe Guida
Giuseppe Guida
Giuseppe Guida
User

Se vuoi semplificarti la vita, inserisci tra i tag <script> e </script> il codice JS fornito da CodePen, quindi verrebbe una cosa del genere:

<script>

Qui il codice JS fornito da CodePen

</script>

e poi copia tutto il codice, compresi i tag di apertura e chiusura <script> e </script>, vai nelle Proprietà della Pagina nella quale hai inserito l'Oggetto HTML, recati nella scheda "Esperto" e incolla tutto il codice suindicato in "Prima della chiusura del Tag BODY" (occhio, BODY non HEAD!). 

Però prima di fare questo elimina il file js che avevi allegato in precedenza.

Vedi screenshot

Leggi di più
Postato il da Giuseppe Guida
Alessandro R.
Alessandro R.
User
Autore

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

Leggi di più
Postato il da Alessandro R.
Alessandro R.
Alessandro R.
User
Autore

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

Leggi di più
Postato il da Alessandro R.
Giancarlo B.
Giancarlo B.
User
Alessandro R.
l effetto funziona, si funziona male, manda in conflitto tutta l home :)  anche lo scroll di pagina si blocca :)

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

Leggi di più
Postato il da Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Utente del mese ESUtente del mese PT

... 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...

.

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Alessandro R.
Alessandro R.
User
Autore

Ciao KolAsim, hai un link? 

Leggi di più
Postato il da Alessandro R.