Today its a rainy day here and you cant do so much things on a rainy sunday, so we are going to recreate the tinder swipe effect with the power of css3.
First of all, i know you like seeing the final effect before reading the post, so here you got it and if you want just to read the code here you got the repository
First we begin creating a simple html structure for our project.
Then we create a simple function to get random user data from https://randomuser.me and append it to our stored view div (The markup and styles used here are just to this project, they arent needed to work, you can use whatever you want).
We proceed to style this cards.
Till now, we only have one card with random people’s faces and names, so here it comes the magic. First we need to create two classes, one for the left-swipe and one for the right-swipe
Now, we have to create the two animations (here i use the unprefixed versions, but you can/must use the prefixied ones)
So, what are we doing here? We are creating two animations (swipe-left and swipe-right) which takes the element being applied, rotates it 13 degs and moves it to its left or right ( the params for translate3d are x,y,z ), and reduce its opacity till 0 to make it fade
Now we have our two classes, and our two animations we only just have to link them
And here we end, now the only thing you have to do its apply this two classes swipe-left and swipe-right to whatever element you want.