Andrea Pinchi - Graphic Design Portfolio

1. Array

//create an Array
holgaArray = $$(".photo");

via javascript registro in un array tutti gli elementi di una classe

2. onclik

$('next').addEvent('click', function(e){
    e.stop();
    if(transitionsEnd){
        increaseCounter();
        nextPhoto();
    }
});

assegno l’onclick ai pulsanti, in modo da incrementare o decrementare un contatore. La variabile Booleana “transitionEnd“, è impiegata per sapere quando la transizione precendente è terminata, viene settata a false appena clicco sul pulsante, e torna true appena ricevo la notifica che la transizione è terminata.
Una volta incrementato il contatore posso recuperare l’elemento corrente dall’Array.

3. CSS3 transitions

sempre via javascript assegno all’elemento corrente la classe che include la transizione.

La transizione avviene in due momenti separati. Inizialmente viene assegnata la classe “.goRight” che sposta l’immagine vesro destra. Al termine della transizione con un callback, assegno la classe “.goTop“, che riporta l’immagine alla posizione iniziale ma con uno z-index più alto.

.goRight {
    transform: translateX(-330px) rotate(-5deg);
    -webkit-transform: translateX(-330px) rotate(-5deg);
}
.goTop {
    box-shadow: 0px 0px 12px #333;
    -moz-box-shadow: 0px 0px 12px #333;
    -webkit-box-shadow: 0px 0px 12px #333;
    z-index: 100;
    transform: translateX(0px) rotate(0deg);
    -webkit-transform: translateX(0px) rotate(0deg);
}

Transitions Properties

#fotocontainer div {
    -webkit-transition: -webkit-transform ease-out .4s;
}

Questo codice si occupa di impostare le proprietà delle transizioni, come il tempo e gli easing

Listeners

//set the transition-class
$(holgaArray[actual]).set("class", "goRight");
//add a listener for webkit transitions
$(holgaArray[actual]).addEventListener('webkitTransitionEnd', backtoTop ,false );
//and remember to remove the listener when you don't need anymore
$(holgaArray[actual]).removeEventListener('webkitTransitionEnd', backtoTop ,false );

È possibile sapere quando la transizione finisce aggiungendo un listener all’elemento su cui è applicata la transizione.
È importante ricordarsi di rimuovere il listener subito dopo averlo utilizzato, ripetendo tutti i paramentri specificati nell’addEventListener

Alert

Quando la pagina viene visualizzata su browser non webkit, compare questo alert. Per implementarlo è stato sufficiente inserire una regola CSS specifica del webkit, in questo modo solo i browser webkit spostano la finestra dell’alert fuori dal viewport:

#alert{
    background: url(../img/bg_alert.jpg) no-repeat center top;
    color:#635e57;
 
    /* trick */
    transform: translateY(-500em);
    -webkit-transform: translateY(-500em);
}

Titoli

i titoli sono stati relizzati tramite la proprietà @font-face, che include un font nella pagina e la propietà box-shadow.

@font-face {
    font-family: League;
    src: url('../font/League_Gothic.otf');
}
 
#header h1, #header h2{
    font-family: League;
    text-shadow: 0px 2px 3px #5a4432;
    margin-bottom: 0;
}

Bottoni

lo stile dei bottoni è reso tramite la proprietà border-image, l’effetto “letterpress” è ottenuto semplicemente impostando il text-shadow verso l’alto:

a.button{
    color: #bbb8b0;
    background: transparent;
    padding: 4px;
    border-image: url(../img/btn.png) 0 4 0 4 stretch stretch;
    -webkit-border-image: url(../img/btn.png) 0 4 0 4 stretch stretch;
    text-decoration: none;
    text-shadow:0px -1px 1px #53402d;
}