Andrea Pinchi GRAPHIC DESIGNER

1. Array

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

I stored all the elements with class “photo” into an Array

2. onclik

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

onclick event on the buttons increase or decrease a counter. the Boolean “transitionEnd“, change staus when the transition ends, is setted to false once the user click on the button, and turn back on true when the page receive the callback of the transition end.
Once the counter is incremented we can get the current element from the Array.

3. CSS3 transitions

Via javascript we assign to the current element the class that implements the transition.

The transition is subdivided in two different step. The first step is described in the class called “.goRight” that makes the image moving to the right. At the end lwith a callback callback, we set the class “.goTop“, that slides back the image to the top of the others, using an higher z-index.

.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;
}

This snippet set the timing and easing of transitions.

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 );

Adding a listener to the element is it possible to know when the transition ends. But is important to remove that listener if we don’t use it anymore.