Codice dei tipi di script usati in questa pagina

Salve, questo è il mio primo post qui e spero di star usufruendo della sezione giusta , ma mi sembra proprio di si perché ciò di cui parlerò mi pare proprio uno script che vorrei usare nella mia pagina.
Mi piacerebbe sapere se qualcuno , gentilmente, è in grado di fornirmi i codici del menù laterale a destra di questa pagina tumblr: http://fuckyeahmessylife.tumblr.com/
Quindi sto parlando del titolo che si sposta al passaggio del mouse sulle immagini , che queste a loro volta si spostano e cambiano forma e che al centro appaia appunto i riquadrini con i vari link.
Spero che qualcuno sia così gentile da riuscirci , ormai ci ho perso le speranze , grazie a tutti per l'attenzione! ^^

[karl94]

Nessuno script, solo transizioni CSS.

Saresti in grado di fornirmi il codice? Purtroppo oggi mi sono messa di impegno a ricercare qualcosa per poter capire bene come funzionano ma non ho trovato questi che cerco ..
( se appunto è un problema che io abbia aperto il post qui , potreste cancellarlo e io lo riaprirei nella sezione corretta.. )

[NLSweb]

ti descrivo quello che il codice css svolge , cosi' che puoi ricostruirlo (non e' difficile) :
prima di tutto devi creare un elemento (div) , che puoi denominare contenitore , che contiene tre elementi che chiameremo destra , centro e sinistra; gli elementi di destra e sinistra contengono le immagini , quello centrale il menu.
ora che hai definito la struttura html , vediamo il comportamento css:
definisci la posizione del contenitore in modo assoluto e dagli le cordinate x y che desideri , con la larghezza e l'altezza necessarie per contenere le immagini e il menu' ; in questo "stato" i tre elementi (sinistra,centro,destra) avranno le seguenti caratteristiche:
posizione relativa per tutti e tre gli elementi , l'immagine di sinistra sara' posizionata a destra e viceversa quella di destra sara' posizionata a sinistra , l'elemento di centro sara' con opacita' zero e spostato di lato (destra o sinistra non importa).
quando lo "stato" del contenitore sara' :hover , cambierai la posizione dei tre elementi (oltre la forma del border-radius dell'immagini) , quindi l'immagine di sinistra si spostera' da destra verso sinistra e vicersa l'altra immagine ed il menu centrale si posizionera' al centro con opacita' uno.
per eseguire l'effetto in modo "animato" , bastera' aggiungere la funzione transition:All 1s ease ed eseguire lo spostamento con la funzione transform: translate(Npx).

spero di essere stato abbastanza esplicito.. se hai ancora dubbi su come scrivere il codice , ti daro' altri aiuti.

Purtroppo io sono un po' impedita ..
Ho sempre lavorato con codici html (senza una vera e propria guida ) con codici giù strutturati e poi modificati secondo le mie esigenze. da questo punto di vista non ho mai avuto particolari problemi, so bene come modificarli.. ma non ho mai lavorato con le transizioni e con la strutturazione personale di un codice .. tu sei stato abbastanza chiaro , ma io ho sempre difficoltà perché so bene che combinerò danni, dato ce non mi sono mai cimentata in questo campo. Se puoi aiutarmi cominciandomi a dare delle basi ti sarei grata, perché cominciando già a vedere un esempio pratico di quello che dovrei usare, mi servirà da slancio per le altre cose.
Mi dispiace per l'inconveniente e ti sono grata se mi aiuterai.

[NLSweb]

ti ho preparato un esempio esemplificato del codice , cosi' potrai studiare meglio...

http://nlsweb.altervista.org/esempi/...ansizione.html

Allora, le immagini sono riuscita ad impostarle, ma ora non so come inserire i link all'interno in quel modo con i riquadrini e il titolo sopra che abbia quest'effetto scorrimento.

[NLSweb]

ti riferisci ai link del menu ?
in tal caso all'interno del div centrale devi creare una lista per le voci , dargli un impostazione grafica a tuo piacimento
dopo, per ogni voce, applichi la stessa procedura delle immagini e nello stato "hover" crei l'effetto brackground semitrasparente
se hai altri problemi fammi sapere .. e magari posta il link del tuo sito cosi' posso vedere come stai procedendo.

Mh ora vedo come sistemare , lo stavo facendo con un altro procedimento ma ora magari sistemo così.
E per quanto riguarda l'animazione del titolo? Non riesco ad inserirla in modo tale da attivarsi insieme alle immagini quando passo su queste con il mouse , ma solo separatamente.. che devo modificare?

#title {
position: fixed;
top: 100px;
left: 900px;
border-bottom: 1px dashed #eee;
color: #000;
font-family: sign;
font-size: 30px;
width: 240px;
padding-left: 20px;
text-align: right;
overflow: hidden;
 transition:All 1s ease;
 -webkit-transition:All 1s ease;
 -moz-transition:All 1s ease;
 -o-transition:All 1s ease;
}

.title:hover {
    width:300px;
    transition:All 1s ease;
 -webkit-transition:All 1s ease;
 -moz-transition:All 1s ease;
 -o-transition:All 1s ease;
}
<div id="title"><a href="/">TITOLO</a></div>

[NLSweb]

per il titolo (come per le immagini) devi impostare lo stato hover non sul titolo stesso ma sul contenitore

#contenitore:hover .titolo

in pratica vuoi che quando si entri nell'area del contenitore tutto cambi.. percio' si le immagini , che il menu , che il titolo ed ogni altra cosa.. sono legati allo stato hover del contenitore e non del singolo elemento.

ho sostituito questo:

.title:hover {
    width:300px;
    transition:All 1s ease;
 -webkit-transition:All 1s ease;
 -moz-transition:All 1s ease;
 -o-transition:All 1s ease;
}

con questo:

#contenitore:hover .title {
  width:290px;
    -webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
}

Ma il titolo non si muove completamente, è fisso.

[NLSweb]

ci sono due problemi..
il primo e che usi width (cioe' la larghezza) per effettuare lo spostamento , invece devi usare left (cioe' la posizione)
il secondo e che anche il titolo come ogni elemento che interessi questa animazione deve essere all'interno del contenitore.

ti ricordo che stai facendo muovere tutto cio' che si trova all'interno del div contenitore!

comunque ho aggiornato la pagina di esempio di cui ti ho scritto il link nel post precedene .. dagli un occhiata cosi' potrai comprendere meglio.

buon lavoro

p.s.
un ultima cosa la position deve essere relative !

Grazie ci sono riuscita sei stato il mio salvatore !!
Davvero gentilissimo ! ^^

[NLSweb]

Prego. Quando hai finito , se vuoi , mandami il link cosi' posso vedere i risultati

ciao e buon lavoro