• User

    Far muovere "background-position" tramite CSS

    Prima di tutto ammetto di non sapere se questo effetto è realizzabile solo attraverso dei codici javascript o basta solamente il CSS...
    Ho visto in molti siti il background dei Link (specialmente dei menu) "riempirsi" di un ombra o di un colore partendo magari dal basso verso l'altro o da sx verso dx.
    Ho visto alcuni tutorial su internet che parlano degli effetti di transizione (e fin qui ci sono) e il comando background-position (ed è qui il problema), solo che non riesco comunque a farlo muovere...
    Qualcuno di voi sà qual è il comando necessario per ricostruire questo effetto? E magari sarei felicissimo se insieme al codice ci fosse anche una spiegazione, perchè ho sete di imparare 😄
    Grazie in anticipo a tutti 🙂


  • User Attivo

    Ciao,
    potresti fornire un link (senza http e www davanti) in cui si vede l'effetto che vuoi realizzare? Perchè per fare le ombre occorre usare la proprietà css "text-shadow" mentre per le animazioni puoi usare o le transizioni CSS3 (supportate ancora troppo poco) o jQuery.


  • User

    ciao e grazie per avermi risposto...
    un sito di riferimento per l'animazione potrebbe essere questo alla voce dei link: wewantzedbazi.com
    So che gli effetti di transizione non sono supportati ancora bene da tutti i browser ma questo sito che ti ho linkato funziona anche su explorer, quindi deduco sia stato fatto con jquery, ad ogni modo è questa l'animazione che mi piacerebbe realizzare ma dall'alto verso il basso...
    Sapresti aiutarmi? Ancora grazie e cordiali saluti.


  • User Attivo

    Dammi pure del tu figurati 😉
    Comunque, il sito che mi segnali non "anima" il background, ma fa un altro tipo di ragionamento. Prende un contenitore nascosto con z-index minore della scritta ma maggiore dello sfondo e gli cambia la proprietà top. In questo modo "simula" che compaia il colore di sfondo. Il tutto è molto più facile a dirsi che a farsi con jQuery. Premettendo che tu abbia realizzato una struttura html css idonea, dovrai semplicemente utilizzare la funzione "animate" di jQuery affinchè al passaggio del mouse venga cambiata la posizione dell'oggetto che fa da background.


  • User

    Ah capisco in sostanza quello che vuoi dire, meno nella pratica.
    Piu o meno come dovrebbe essere il codice sia di css che di jquery per realizzare una cosa simile? Almeno cosi cerco di capacitarmi 🙂