previous

page 2

next

Nothing new so far but enough for me to show you the easy way I found to do the animations.
It's not very intuitive but it's simple and it does the job.
First we add the following class to our CSS:

.move {
transform:translateX(16.3vmin);
transition:transform 2s;
}

The 2nd line instructs the browser to move the item to the right.

The 3rd line says to take 2 seconds to carry out the move.

So to get an item to move, we simply add this class to the item.

I wrote a move function to do this for the first five cards.

function move() {
for (var i=0;i<5;i++) {
var el=document.getElementById(i);
el.classList.add('move');
}
}

To test it, I simply added an onClick attribute to the last card.

<img src='cards/back.png' class='card' onClick='move();'>
previous
next