Inserire rollover di + testi
Autore: Linda R.
Visite 1572,
Followers 2,
Condiviso 0
Salve a tutti,
vorrei inserire all'interno della mia pagina un effetto rollover. Ho realizzato una gif animata di immagini a tempo che compaiono e mi piacerebbe poter inserire un testo che cambia in base alle immagini ma con l'effetto rollover il problema è che non si possono inserire dei testi a scorrimento che si susseguono. Le frasi che si inseriscono vengono inserite interamente ad effetto rollover. Qualcuno ha una soluzione? Grazie
Postato il
Autore
Sta volta la risposta la do io:
Basta inserire nell'oggetto html della pagina interessata il seguente codice:
<script type="text/javascript">
var TextIndex = 0;
frase = new Array();
frase[0] = "SOPHISTICATED, FRESH CUISINE";
frase[1] = "TESTO2";
frase[2] = "TESTO3";
frase[3] = "TESTO4";
TextIndex = Math.random()*(frase.length);
TextIndex = Math.floor(TextIndex);
function rotazione() {
if (TextIndex == frase.length) {TextIndex = 0;}
document.getElementById("ruotare").innerHTML = frase[TextIndex];
TextIndex++;
setTimeout("rotazione();",5000);
}
</script>
<div id="ruotare" style="align:center; height:100px; width:800px; border: solid 0px #003366; color:#ffffff; background-color: #trasparent; font-family:Raleway; font-weight:normal; font-size:40px; margin:0px auto; padding:8px;"></div>
<script type="text/javascript">rotazione();</script>
dove le frasi da ruotare vanno inserite al posto di TestoX. Lo stile del rettangolo è evidenziato di viola e può essere modificato per quanto riguarda la posizione (center), l'altezza (60px), la larghezza(400px), lo stile del bordo, il colore del testo (#003366), il colore di sfondo (#FFEAE9), il grassetto (font-weigh: bold), la dimensione dei caratteri (14px) il margine rispetto all'esterno (margin) e il margine interno (padding). Il valore 5000 è in millisecondi e rappresenta il tempo di permanenza di ciascun testo. Aumentando tale parametro la rotazione sarà più lenta.
Autore
Dunque in virtù di questo semplice script vorrei sapere se qualcuno di voi sa dirmi come poter dare un effetto di transizione al testo in entrata e in uscita, tipo di scorrimento.
Per quanto riguareda invece la gif inserita se in photoshop gli dò un effetto transizione qsto non compare ed accade che l'immagine risuklti solamente bianca. Di seguito vi posto il link del nuovo sito.
http://www.centroames.it/Data/Sites/1/VERAPLUS/
Scusa la Domanda, visto che hai la pro non puoi utilizzare quella che ti propone il programma ?
Autore
Si posso utilizzare l'oggetto Animated Hedlines, ma non so come dargli i tempi di entrata...non me li fa modificare
Io NON posso verificare (ho la EVO) ma mi sembra che l'oggetto testo della PRO abbia il rollover a chedule... non so se questo ti può essere utile, ciao.
Autore
Il rollover non funziona, in pratica fa scorrere solo il testo ma non ti fa entrare ed uscire delle frasi, se inserisci più frasi te le mostra tutte insieme.
...!... GifAnim a parte, 1.24 MB, da evitare assolutamente...!...
... hai provato le opzioni dell'oggetto testo a schede che ti avevo già in altro topic indicato...?...
>> Presentazione
.
Autore
Kolasim buongiorno e buon anno, quando inserisco l'oggetto testo e in impostazioni x il Rollover, scelgo scorrimento a schede questo non funziona.
Autore
Ok ho provato la presentazione delle schede e va bene, grazie.
... ciao, grazie, per il riscontro; non avendo il programma adesso so che l'opzione è valida...
... Buon Anno anche a te...
Autore
Qualcuno sa dirmi come mai l'effetto di transizione nell'esportazione delle gif come mai non funziona e si vede soltanto un'immagine bianca?
... le transizioni GIF devi realizzarle con il tuo programma di grafica...
... per come ti avevo anticipato, il GifAnim è improponibile...
... pensa che il tuo GIF con due sole immagini di bassa qualità pesa già 1.24 MB ...
... applicando le transizioni tra le due immagini su 80 fotogrammi, verrebbe fuori un file di circa 6-8 MB ...
...!...troppi...!... ...si potrebbe paralizzare la pagina ospite...
.
... meglio sarebbe una semplice transizione in JavaScript con peso max di 100-200 KB (!!!); ...oppure se vuoi fare tutto in automatico, potresti farla con il programma in una pagina nascosta e senza applicare la grafica del sito, e poi usare il solito Div_CUSTOM+IFRAME da usare come sfondo...
.
... per sfizio, ho voluto provare adesso col mio programma PSP una transizione luminosa sul tuo GIF, riducendolo di misure a 400x177 e di peso a 665 KB, sempre troppi, e che trovi in allegato...
.
Autore
Provo a vedere se riesco ad inserire le immagini tramite una transizione con JavaScript e ti faccio sapere, nel frattempo grazie.
Autore
Dunque, secondo suggerimento di Kolasim, ho inserito uno script con immagini ed effetto fade. Mi chiedo come riesco a sovrapporre i testi a scorrimento sullo script? Purtroppo vanno a finire nella sezione sotto.
Autore
http://www.centroames.it/Data/Sites/1/VERAPLUS/
...mi pare che ora però ci siano grossi problemi con il menu hamburger, che appare quando si scende quasi in fondo...
hai questo valore ... che sposta dal top di pagina le scritte...
<div id="imHeader" style="height: 719px;">
Autore
Giancarlo ma questo valore viene dato direttamente dal programma e non da me.
mah forse non ho capito...
per sovrapporre lo scorrimento a presentazione delle schede alle immagini, basterebbe mettere le immagini in stile righe e sopra lo scorrimento a schede con altezza adeguata alla centratura... o è troppo semplice senza codici?
Scusa ma hai un header alto 719px ?
è alto 719px perche hai messo lo slide nell' header .... ma va nel corpo centrale
Autore
Ok ho fatto una prova diversa, ho creato una pagina nascosta in website e realizzato uno slide show con lo strumento slide show classico. Purtroppo con questo metodo i problemi sono 2. Lo slideshow viene visualizzato nel formato delle dimensioni che website lo fa pubblicare ed il testo continua a non potersi sovrapporre :/
scusami Linda forse NON ho capito il... ma tu vuoi realizzare qualcosa del genere ?
http://giancarlob.altervista.org/test-vari/header-trasparente/
Autore
Giancarlo ti spiego meglio. Ho realizzato il seguente sito
Prova Sito
inserendo la wowslide col sistema i-frame di kolasim da te indicato. Purtroppo come puoi ben notare mi crea dei problemi nella homepage che non riesco a risolvere, ovvero la sovrapposizione del menù sulla slide in maniera incorretta. Per cui volevo ovviare a questo problema realizzando una slide semplice con sovrapposizione di testo senza sfondo. Ma a quanto pare è peggio.
... on Linda ho visto la Prova Sito, scusami se NON capisco (forse mi dovrei rileggere tutti i passaggi), ma cosa intendi per sovrapposizione del menù sulla slide in maniera incorretta
Autore
Ciao Giancarlo, nella pagina introduzione, se riduci la finestra o guardi il sito su un tablet o pc, noterai che il menù si sovrappone alla wowslide e che la parte di header di colore bianco non prosegue in orizzontale.
Linda... credo dipenda da come hai impostato sul programma il menù alla risoluzioni inferiori, devi controllare i breackpoint alle risoluzioni inferiori e impostarli come per la prima.
Autore
Giancarlo ti allego l'immagine x farti capire cosa intendo. In pratica compare questa striscia bianca che non so a cosa sia attribuita.
Autore
Non ci sono sfondi nè nell'header, nè nel menù e nè negli sfondi. Non riesco proprio a capire da dove provenga.
Linda non ho il programma davanti non posso inviarti info più precise... ora ma ti ricordo (scusami se mi ripeto) che di header ce ne uno per ogni breackpoint ... quindi controlla anche gli altri.
Autore
Come faccio a controllare gli header dei vari breackpoint? In responsive del programma non riesco nemmeno a vedere le anteprime.
non potendo fornirti gli screenshot vado a memoria... se vai sullo stile del template sulla sinistra vedi i vari step dei breack... il primo naturalmente è il desktop, clicca su quello sotto, e controlla la disposizone del menù, come viene visualizzato, le dimensioni di header e footer se sono lo stesse o se vanno modificate, fai così anche per gli altri breack...
eventualmente vai anche sulla gestione di header footer ed anche quì trovi i vari breack ... verifica anche quelli.
Mi dispiace ma non riesco a darti altre info al momento.... spero ti siano utili.
Ciao.
Skeggia, d'accordissimo con quanto dici, è la via più semplice, tutto creato con le funzioni del programma tranne la GIF animata creata con software esterno (metto link dell'esempio online alla fine ma è importante leggere quanto scritto di seguito)
Ho usato la GIF animata creata da Linda (ci andrebbe un effetto di transizione più "morbido" tra una foto e l'altra ma ho esattamente preso quanto da lei creato in un esempio) e il risultato, abbastanza soddisfacente, è quello che si vede al link sottostante... Ma.. purtroppo c'è un "ma"... Website ha un limite che andrebbe risolto a mio avviso (magari poi apro un post a parte).
In pratica quando si restringe la finestra del browser al di sotto dei 700px e le scritte si adattano su tre righe, le parti inferiori delle lettere p e g (quelle con "stanghettine" sotto per intenderci) vengono irrimediabilmente tagliate (vedi screenshot allegato per capire meglio)
Provate voi stessi per verificare, il link del risultato finale è questo (tra l'altro non c'è nemmeno il problema del menù hamburger visibile invece nell'esempio di Linda):
http://www.bozzasito14.altervista.org/provaslide01/
Il link inserito nel mio post sopra mi risultava un po' tagliato (strano), lo rimetto qui:
http://www.bozzasito14.altervista.org/provaslide01/
ciao a tutti
P.S. ho segnalato la cosa in privato ad Incomedia. Molto probabilmente Incomedia mi dirà che la soluzione sarebbe ridurre la dimensione del font Oswald da 26pt a molto meno ma io voglio usare quella dimensione e poi una dimensione inferiore del font su quella slide/GIF animata a pieno schermo non avrebbe senso, così è tutto ben "equilibrato"
@giuseppe: difatti è quanto volevo dire io... molto semplicemente, con le funzioni del programma, senza codici esterni... ma forse qualche volta, ci lasciamo prendere la mano da questi codici esterni... io stesso mi ero dimenticato dello scorrimento a schede tipo presentazione, che ha ricordato la mente vigile di Kolasim... per le risoluzioni inferiori, dalle mie parti si dice " t'adadatta' ", tradotto "ti devi adattare"... personalmente non condivido la navigazione e tutto questo sbattimento per adattare i siti alla navigazione smartphone, con un display così piccolo... secondo me sugli smartphone bisognerebbe navigare solo per i servizi (mappe, indicazioni varie, ricerche, ecc.) e non per visitare un sito di ecommerce per fare acquisti... ma è solo un mio pensiero...
un saluto a tutti...
P.S. x giuseppe: ho visto ora il difetto che segnali: in attesa dell'intervento dello staff, prova a stabilire una interlinea maggiore di quella impostata di default da website (mi sembra che website imposti un 20% in più della grandezza della font... esagera...)... dovrebbe funzionare... e non tagliare le "gambe" alle lettere...
Skeggia... "ta da dà da fà" (ti devi dare da fare) e "t'adadattà" (ti devi adattare) si dice anche da me a Bari
L'interlinea mi sembra non si possa impostare con le sole funzioni di Website... Non ho il programma aperto in questo momento, non ricordo bene ma mi sembra proprio di no.
ciao Giuseppe, ...il problema inspiegabilmente si trascina da > QUI, ...ove ti ho anche nominato, sperando nel tuo intervento come mia extension! ... ... visto che nei vostri esempi, è tutto regolare...
.
@giuseppe: si lo so che l'interlinea non si cambia con le funzioni del programma... ma per una volta... un piccolo codice...
line-height
per risolvere un problemino contingente (e risolve questo problema sicuramente) (dato che il programma automaticamente mi sembra aggiunga il 20% [corpo 26, il 20% = 5,2, quindi 31,2] in più del corpo della font... quindi esagera per vedere l'effetto che fa)... si può anche usare... in attesa che questa importante funzione possa venire inserita in website...
ciao
Ciao Kol, grazie per avermi menzionato nell'altro topic ma purtroppo sovente qui nell'Help Center diventa difficile seguire i vari topic aperti...
Cmq ho appena risposto nell'altro topic segnalato da te...
Per questo topic invece e per quanto riguarda il mio esempio postato sopra, il procedimento è questo:
l'Header va impostato con altezza pari a ZERO, il Menù viene posizionato sopra l'header e si dà la stessa altezza al Menù e allo Sfondo dell'Header (assegna allo sfondo dell'header il colore che vuoi dare al menù, menù che invece potrai lasciare trasparente o dello stesso colore dello sfondo dell'header, e poi nello sfondo dell'header inserisci anche il logo), poi si inserisce l'Oggetto Testo, si attivano le schede al suo interno, si creano i testi e si attiva dallo stile schede la visualizzazione come "presentazione" impostando a proprio piacimento gli altri valori e poi al PASSO 2 MODELLO/Personalizzazione/Opzioni su Scroll della Pagina imposti il Menù su "mantieni sempre visibile" e "estendi alla larghezza della finestra del browser" e ci inserisci il logo da visualizzare anche sullo scroll della pagina.
P.S. Ripeto l'unico problema, come descritto sopra, si ha sui testi scorrevoli con una certa dimensione del font che, al momento, vengono tagliati sotto nell'adattamento alle risoluzioni inferiori ma basta ridurre la dimensione del font e il problema si risolve. Intanto ho segnalato la cosa ad Incomedia e vediamo che succede.
Credo che il sistema della GIF animata in Stile riga + Oggetto Testo con schede sia la cosa più semplice se si vuole avere una effetto che dia l'idea di una slide full width con dei testi facilmente modificabili con le SOLE funzioni del programma (questo per la versione PRO 13, nella EVO le schede non ci sono)
Si Skeggia, figurati, concordo, soluzione davvero semplice e pratica da inserire per risolvere le "gambe" tagliate su alcune lettere.
Dopo provo ma sono certo che andrà bene. Ciao!
Per la evo puoi utilizzate l'oggetto galleria crei i testi e li salvi .png senza sfondo.
... teoricamente sì, ...ma per la GifAnim, sicuramente no! ... cioè da evitare! ...
.
Kol, non va sui dispositivi mobili la GIF animata?
Quale sarebbe l'inconveniente?
ah probabilmente la GIF su schermi retina display non rende al meglio...
Ciao Giancarlo, sì so che si può fare quello che hai proposto tu ma qui si cerca in effetti di ridurre al minimo l'uso di programmi o codici esterni ma credo proprio che la cosa sia impossibile: per sfruttare al meglio Website ci vuole sempre l'ausilio del codice esterno. Beh, vorrà dire che ci perfezioneremo nell'uso di codici esterni, non è poi un male, diversamente rimarremmo sempre allo stesso livello. Ciao
P.S. per Kolasim, ok, capito, ho letto il tuo post sulle GIF animate... E se vengono ottimizzate?
... bassa qualità e peso spropositato assolutamente da evitare, specialmente per il mobile, motivato qui: https://helpcenter.websitex5.com/it/post/163059#comment7
... ed ancor di più qua: https://helpcenter.websitex5.com/it/post/163059#comment12
... le GifAnim potrebbero essere usate solo per piccoli e leggeri loghi o mini banner, e senza esagerare nella pagina ospite...
.
ciao
Pefetto Kol. In effetti ho provato a creare una GIF animata di dimensioni 1920 x 820 e, aggiungendo anche qualche fotogramma in più per l'effetto di transizione tra una foto e l'altra ed ottimizzando il tutto, non si scende al di sotto di 1.5 MB per mantenere una qualità ottimale delle immagini.
non ho letto tutti gli interventi perché il post é già lunghissimo, ma credo che con WebAnimator risolveresti ogni tua esigenza
Ciao Fabio, grazie per il tuo intervento. L'esigenza esposta in questo topic riguarda Linda, io ho semplicemente realizzato praticamente il consiglio di Skeggia ma non ho la stessa esigenza di Linda. Per fare ciò che chiede lei uso solitamente Wowslider e i testi per ogni singola foto della slide li vado poi a personalizzare tramite lo stesso Wowslider.
Ciao ciao
ciao giuseppe; sì, mi riferivo a linda
Ah ok Fabio
Ciao
... lascia perdere tutte le personalizzazioni extra, slideshow e testi che siano, e dedicati alla realizzazione di un layout di base, che funzioni come quelli che hai visto, responsive, con menu in alto ed una intestazione vuota alta 100 pixel; ...dovrebbe essere semplice e senza complicazioni...
... quando l'avrai fatto, posta il LINK... ... e poi con l'aiuto degli stessi che si sono prestati prima, vedrai che, un passo alla volta, risolverai rapidamente...
.