Salve a tutti, come da titolo vorrei riuscire ad animare la scritta dello slider presente in questa pagina: http://theinformaticblog.altervista.org/ .
La classe che mi interessa animare è "nivo-caption".
Vi ringrazio in anticipo
Salve a tutti, come da titolo vorrei riuscire ad animare la scritta dello slider presente in questa pagina: http://theinformaticblog.altervista.org/ .
La classe che mi interessa animare è "nivo-caption".
Vi ringrazio in anticipo
Guarda che si anima già.
Piccolo consiglio dai un colore più scuro alle voci del menu a tendina, si vedono a malapena
Grazie per il consiglio, lo farò sicuramente
Comunque la scritta dello Slider (quella sotto le immagini intendo) non si anima proprio
Se intendi:
Tranquillo, parliamo anche del tuo Mac..
Siamo sempre aggiornati per mantenere il passo del Web!
Tutte le novità in campo informatico le trovi qui!
anche quelle cambiano in base all'immagine, testato su Chrome, FF e Opera
Si, so che cambiano, ma vorrei animare proprio quella fase, tipo con un fadeIn o roba del genere, ecco, non dargli un cambio secco, non so se mi sono espresso bene
Ciao
La scritta, come dici tu, può essere controllata tramite file css e tramite jquery.
Ora, nel file css hai individuato benissimo la classe ".caption" che gestisce la formattazione di cotale scritta, e qui tutto OK.
Per poterla animare hai bisogno pertanto di una o più funzioni che la controllano.
Adesso, da quanto ho capito, probabilmente queste funzioni non sono state inserite nel plugin per Wordpress che hai installato, altrimenti non avresti avuto neanche modo di chiedere aiuto.
Ancora probabilmente, visto che la scritta appare, mi viene da pensare che il plugin si limita in questo caso alla sola gestione caption del: colore testo, sfondo e trasparenza.
Nel tuo caso dunque, non ti è possibile animare la scritta dal pannello di controllo di Wordpress, semplicemente perchè non implementato (e qui il problema!), a meno che tu non inserisca a mano tale codice in un file specifico (che adesso non conosco) ma che si trova sicuramente in wp-content/plugins/nivoslider/.
A questo punto, qualora tu decidessi di mettere mano al codice, è bene sapere che Nivoslider dispone già di tali funzioni (vuote però di default) che sono (mi pare):
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
Nel tuo caso penso basterebbero la prima, seconda e l' ultima di tali funzioni.
Per il codice ti invito a leggere la documentazione relativa corredata di esempi, sul sito di Nivoslider.
Per ultimo...
Prima di animare il tutto, onde evitare antiestetiche contemporaneità di animazioni di slider e caption, consiglio però di cambiare l' effetto sulle immagini (togliendo la direzione a sinistra), delle immagini pagination che andrebbero messe più in basso (formattabili da css) e lo sfondo della caption (che andrebbe sostituito con un colore bianco trasparente quanto basta).
blackpanth
Grazie mille innanzitutto, poi volevo aggiungere, che nel caso potrei aggiungere un link al file se necessario per visualizzarlo. Può essere d'aiuto?
Il file in oggetto contiene senz' altro il codice javascript della distribuzione originale, per cui non è necessario linkarlo.
Premetto che Nivoslider non l' ho mai utilizzato per Wordpress ( vado dunque a naso) per cui non so se funzionerà il relativo plugin effettuando i cambiamenti su di un solo file (ma è solo un piccolo dubbio).
Da precisare inoltre, che effettuando questa operazione, la gestione del plugin relativamente alle modifiche da apportare non saranno comunque settabili da admin (richiederebbe probabilmente, mettere mano al codice su più files).
A questo punto, se hai individuato il file (come lasci intendere), contenente le funzioni elencate nel post precedente, prova ad inserire il seguente codice e guardane il risultato:
afterLoad: function(){
jQuery(".nivo-caption").animate({left:"300"}, {duration: 500})
},
beforeChange: function(){
jQuery(".nivo-caption").animate({left:"100"}, {duration: 500})
},
afterChange: function(){
jQuery(".nivo-caption").animate({left:"200"}, {duration: 500})
}, // Togli quest' ultima virgola se non segue un' altra funzione
Qualora tale modifica funzionasse, concludo nel dare alcune precisazioni:
1) Da notare che i "numeri" li ho messi a casaccio (giusto per rendere l' idea visiva) e che hanno bisogno di essere calibrati ovviamente alle esigenze estetiche del tema.
2) Questo è solo un esempio (in rete potresti trovarne molti altri con altri effetti).
3) Per ottenere risultati apprezzabili, dovresti mettere in preventivo che il tutto comporta molto tempo e tanto, tanto smanettamento da effettuare sia sulle funzioni su citate che sul css.
Ciao
blackpanth
Ok, grazie mille ancora, provo subito e ti faccio sapere l'esito
Permessi di invio
Rispondi quotando