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