Unofficial WebSite X5
WebSite X5 versioni obsolete => WebSite X5 [v10] Evolution - Discussioni generali => Topic aperto da: Zambelletti - 26 Giugno, 2013, 23:59:42
-
Buon giorno, ho cercato di implementare questa applicazione in WSX5,
http://spritespin.ginie.eu/examples.html (http://spritespin.ginie.eu/examples.html)
ma non sono riuscito a venirne fuori, come potete vedere :
Link (http://www.pdagrafica.com/Personale/test/pda/spritespin.html)
Magari è semplicemente una questione di versioni (nella migliore delle ipotesi), nella peggiore delle ipotesi ho sbagliato il codice.
Qualcuno più esperto, saprebbe dirmi cosa ho sbagliato e come posso correggere?
Grazie!
-
Lasciando da parte le ipotesi, mi sembra (ripeto, mi sembra) che tu abbia tentato di "tirar fuori" l'effetto dall'esempio online e non scaricando lo zip da QUI (http://spritespin.ginie.eu/download)
Se apri il file basic-demos.html e dai un'occhiata al sorgente, ti sarà più semplice capire come funziona e cosa ti serve.
-
hai visto quasi giusto. Riprovo dallo zip e ti dico. Grazie mille! A buon rendere.
-
L'ho visto con più calma, per incertezza ho caricato anche dei file che non occorrono al mio esempio : 360 spin with 1 sprite / 36 frames,
[/size]ma non mi funziona nulla.
[/size]
[/size]Secondo voi, dov'è che sbaglio?
[/size]
[/size]Grazie anticipatamente a chiunque voglia aiutarmi.
[/size]
-
Ho provato con la demo, qui:
http://lemonsong.altervista.org/test_spritespin/ (http://lemonsong.altervista.org/test_spritespin/)
In ogni pagina trovi una "variante".
In ogni pagina ci sono dei commenti che ti dovrebbero aiutare.
Le risorse da usare le "leggi" sempre dal sorgente della pagina.
Nello zip scaricato dal sito, manca questo file:
http://lemonsong.altervista.org/test_spritespin/images/ajax-loader.gif (http://lemonsong.altervista.org/test_spritespin/images/ajax-loader.gif)
Non l'ho provato con tutti i browser.
-
Funziona! :)) :)) :))
Credo di aver capito il mio errore, al di la di file allegati non necessari, che comunque non credo influenzassero il funzionamento, sostanzialmente mi mancava un DIV :
<div id="360frames"><>.
Poi....non funzionandomi......le ho provate tutte cadendo in altri errori.
Ti ringrazio tanto e del resto hai fatto un grosso lavoro, veramente lodevole, utile a me e agli utenti futuri.
Fantasticando, mi chiedevo se volessi aggiungere una "manina" e l'icona 360°
tipo questo : [size=78%]http://www.htc.com/it/smartphones/htc-one/ (http://www.htc.com/it/smartphones/htc-one/)[/size]
come potrei modificare il codice?
-
Ho aggiornato pagina 1: copiato pari pari dal sito linkato.
-
GRANDE!!!!
Proprio quello che ci voleva!
Non ho parole per ringraziarti, spero di poterti ricambiare la tua cortesia in qualche modo.
Ma...se volessi eliminare quella cornice tratteggiata? Non sono riuscito ad individuarne il codice.
Tu per caso sai dirmi su quale codice intervenire?
Grazie ancora.
-
Prego!
Ma...se volessi eliminare quella cornice tratteggiata?
.spritespin-instance {
border: 1px dashed;
margin: 20px auto;
cursor: pointer;
}
Ma quel "libro" che ti ho prestato, lo stai leggendo? :)
-
Credo di si, come hai avuto modo di vedere da quel sito test che sto facendo, hofatto diverse integrazioni in WSX5, certo con qualche errore.....:)
Provo e ti mostro.
-
ecco : LINK (http://www.pdagrafica.com/Personale/test/pda/360-spin-with-1-sprite---36-frames.html),
sono riuscito a modificare il bordo tratteggiato, ho inserito ma manina e l'icona a 360°.
Ho dovuto solo andarmi a cercare l'icona e spostarla in orizzontale, perchè mi usciva fuori dal mio riquadro.
Pare che funzioni!
Approfitto per ringraziarti ulteriormente per avermi seguito in questo post pazientemente e con molta disponibilità, del resto non mi pare che sia un'argomento trattato, quindi potrà servire anche a tutti gli altri utenti.
Alla prima occasione faccio un test su file miei e speriamo che sia tutto ok.
Non sapendo come ringraziarti, ti ricordo che ti debbo sempre una pizza!
(http://www.campaniaonline.it/wp-content/uploads/2013/05/pizza-margherita.jpg)
-
Grazie per la pizza, dopo tutte quelle pedalate in bicicletta, ci voleva.
Quella che avanza, la metto in congelatore... :)
-
Ciao Pasquale ho visto il tuo sito di integrazioni, mi permetti di scaricare i file di esempio se esistono? Bisogna avere login e password?
Fammi sapere e grazie
-
non esiste il file zippato, te lo debbo creare.
Ho fatto un sito dove sto facendo i miei test e le integrazioni.
il login è un altro test.
Eventualmente mi dici cosa ti serve e vedo di farti lo zip.
-
Ciao, mi interesserebbe la realizzazione di nivo slider e supersized , se riesci anche con una piccola spiegazione.
Grazie ancora per l'attenzione e la disponibilità.
Saluti
Stefano
-
il novinon l'ho completato perchè ho avuto problemi con la versione 10.
-
@The Mole
ho creato un post nella dovuta sezione.
http://www.unofficialwsx5.com/index.php?topic=1462.0 (http://www.unofficialwsx5.com/index.php?topic=1462.0)
fammi sapere.
-
Buon giorno, scusate se ritorno sull'argomento.
L'ho messo in pulito e mi si è verificata un'anomalia : non visualizzo più l'icona 360°
ecco il LINK (http://www.pdagrafica.com/360-spin.html)
Qualcuno può darmi un suggerimento per risolvere?
Grazie!
-
Attualmente manca il div dell'icona:
<div class="icon360"></div>
<div id="360frames" bla bla bla...
-
Caro Lemong,
ti chiedo scusa perchè è stato un banale errore di copia-incolla.
Come vedi ora è completo e funziona :
LINK (http://www.pdagrafica.com/360-spin.html)
Suppongo, che messa l'icona 360°, utilizzando lo stesso codice, non dovrei avere problemi a sovrapporre a questo html una qualsiasi altra immagine (al posto di 360-icon) e siccome ho z-index, addirittura potrei sovrapporre un immagine all'animazione.
Giusto?
Ti posso chiedere una cortesia personale immensa?
Te lo chiedo amicalmente.
Ho il desiderio, di sovrapporre un testo a questo html (tipo quello che ho già messo), magari che si sovrapponga pure all'animazione, poi intervenendo su z-index, lo posso anche togliere all'occorrenza.
In teoria Immagino che debba creare un div nel html e in esperto css mettere le mie preferenze di stile.
In pratica, non ci riesco.
non ti chiedo di farmi la famosa "pappa pronta" ma almeno una fonte da dove posso estrapolarne il codice, come tutti gli altri esperimenti che ho fatto da solo e completati con il vostro prezioso aiuto.
Ti ringrazio anticipatamente.
-
Temo di aver capito poco.
Prova a vedere se questo esempio si avvicina:
http://lemonsong.altervista.org/test_spritespin/pagina-1.html (http://lemonsong.altervista.org/test_spritespin/pagina-1.html)
Non l'ho fixato per browser tipo IE7.
Se va bene, è da personalizzare.
-
Mi sono espresso male.
Realizzo un immagine e te la mostro.
Scusa
-
Eccomi, provo a chiarire,
abbiamo realizzato un immagine (icon-360) sovrapposto ad un html, quindi una volta che ho il codice, mi basta sostituire l'immagine(icon-360) con una a piacere e posizionarla mediante i codici)
La difficoltà sta nel sovrapporre più di una immagine, tipo questo (v. allegato Immagine-img)
La cosa invece che vorrei realizzare è sovrapporre un testo vero (non un immagine) all'oggetto HTML (v. immagine allegata immagine-text).
Poi, se c'è la possibilità in futuro, che il testo scorra, abbia un'animazione, una transizione, ancora meglio, però per ora l'importante è un testo statico che si sovrappone ad un oggetto html.
E' più chiaro?
Grazie!
-
Mah, così al volo, mi sembra che hai già tutto quello che ti serve (stesso metodo dell'icona 360).
Se sovrapponi uno o più div con testo, immagine etc... alla "rotazione", non potrai interagire col mouse nello spazio occupato dal/dai div.
Questa è la prima cosa che mi viene in mente senza andare a cercare altre soluzioni/metodi alternative/i, che sicuramente ci saranno.
-
Provo e ti faccio sapere, intanto grazie!
-
buon giorno, scusate.
Ho fatto questa animazione e funziona! :
link (http://www.pdagrafica.com/360-spin.html)
per crearne un'altra, ho copiato la pagina, modificando i nomi dei file e l'altezza del html, perchè le immagini sono più piccole di 18 pixel.
e non mi funziona, non vedo le immagini.
Ho verificato con firebug e mi dava proprio un errore sull'atezza.
Ho provato a modificarla, ma non funziona. :(
Se avete un secondo, riuscite a dargli un occhio?
Siccome ne debbo fare di diverse di queste animazioni, vorrei capire dov'è l'errore e come rimediare.
Grazie!
link (http://www.pdagrafica.com/360-spin-nemo.html)
EDIT :
Come non detto : dopo averle provate tutte, a culo, ho cancellato una parte di codice, e l'ho incollata nuovamente.
Funziona.
Non so che pensare, o veramente mancava un punto, una virgola.......
oppure il mio wsx5 non funziona bene.
Ho molti problemi e vado continuamente in crash.
Grazie comunque.
-
ok, ci sono riuscito!
Grazie, è una cosa a cui tenevo molto.
Però mi si si sono presentati due problemini :
c'è uno spazio tra la fascia azzurra e l'animazione, e anche il testo e il bordo sono trasparenti.
un piccolo suggerimento per rimediare?
Grazie!
EDIT : ecco il link (http://www.pdagrafica.com/360-spin-vitra-ottoman-charles.html)
p.s
ho provato a fare 2css, uno per il testo e uno per il fondo, ma non ci sono riuscito
-
c'è uno spazio tra la fascia azzurra e l'animazione, e anche il testo e il bordo sono trasparenti.
Se ho capito bene, in HEAD devi portare a 0 (zero) margin (20px):
Only registered users can see contents. Please click here to Register or Login.
Nel CSS della pagina (oggetto HTML) devi togliere (o modificare) opacity:
Only registered users can see contents. Please click here to Register or Login.
... se ho capito bene.
-
intanto grazie!
Per la questione della trsparenza, io vorrei che il box nero, sia trasparente com'è adesso, mentre il testo e la cornice le voglio senza trasparenza.
E' possibile? Come potrei modificare?
Grazie!
(mi ero espresso male)
-
Togli tutto quello che riguarda opacity:
Only registered users can see contents. Please click here to Register or Login.
Crei un quadratino di pochi px (png) con la % di trasparenza che desideri e usi l'immagine come sfondo (background-image); dovresti togliere pure il colore (background-color).
Credo che sia la via più semplice.
-
Non ci avevo pensato, lo sapevo fare perchè lo avevo già fatto, solo che non mi funziona :
background-image: url('images/background-blak-opacity-80.png');
background-repeat: repeat;
position: absolute;
-
background-image: url('images/background-blak-opacity-80.png');
Only registered users can see contents. Please click here to Register or Login.
-
Grazie funziona!
Commetto sempre lo stesso errore, ma perchè lo vedo scritto su html.it
@lemonsong,
non so come cercarlo in internet, però avrei bisogno di aggiungere una variante.
In pratica, avrei la necessità di fare una restrizione dell'area di movimento del mouse.
Es; ho un immagine 1000x500 px, e vorrei che il movimento del mouse avrebbe effetto in un'area di 50x250 pixel, top: 100px, left : 75px.
Uscendo fuori da quest'area, il movimento di mouse non sortisce effetto.
Lo debbo cercare in internet o si tratta di aggiungere qualche codice che puoi suggerirmi?
Grazie!