Bygg ett fullständigt tinder som karusell i vanilj JavaScript

Tänkande utanför datingvärlden, konceptet att svepa åt vänster eller höger för att uttrycka ett val kan tillämpas för många användningsfall med syftet att samla användarpreferenser om alla typer av ämnen.

I detta sammanhang bestämde jag mig för att bygga en "Like Carousel" på egen hand i ren JavaScript och att dela mina erfarenheter med dig.

Den svepkarusellen kan ses som FIFO-kortstapel. Ett höger svep på det översta kortet betyder en "liknande", i andra riktningen en "ogillar". Dessutom anses en svep mot skärmens övre kant som en "super-liknande". När det första kortet kastas, tar det andra platsen tills det inte finns fler kort i kortlek.

Detta är vad vi kommer att uppnå:

Trevlig! Är det inte?

Steg 1 - Låt oss göra det

Som första steg kommer vi att skriva en bootstrap-sida för vårt projekt:

#board div är vår duk och alla omedelbara barn med klass .kort en del av däck. Med tanke på att webbläsare indexerar absoluta positionerade divs efter utseende, vet vi att det sista .kortelementet alltid kommer att vara det översta kortet.

Steg 2 - CSS till undsättning!

Om vi ​​försöker öppna vår webbsida ser vi bara en vit skärm. CSS till undsättning!

Resultatet ska vara ett vitt kort mitt i en svagt grå bakgrund.

Steg 3 - Det är en slags magi

Nu måste vi fånga svepningsevenemanget så snart användaren interagerar med kortet.

För att göra det valde jag det fantastiska HammerJS-biblioteket.

Hammer är ett öppen källkodsbibliotek som känner igen gester gjorda av beröring, mus och pekareEvents. Den har inga beroenden och den är liten.

Inklusive Hammer-biblioteket (v2.0.8 i skrivande stund) kan vi börja bygga klassen som faktiskt hanterar gesterna:

Steg 4 - Kom igen, gör ett steg mot mig!

Hammer skickar mycket information om upptäckta gester som argument för återuppringningsfunktionerna som vi skickar till igenkännarna.

Låt oss skriva en logik som får kortet att röra sig tillsammans med pekaren när den dras och sedan studsa tillbaka när den släpps.

När användaren börjar dra kortet lagrar vi de initiala koordinaterna och tar bort CSS-övergångsegenskapen för att få en rörelse med samma hastighet som pekaren.

Med tanke på att vi inte känner till CSS-translateX och translateY-måttenheter, kallar vi getComputedStyle för att översätta de befintliga egenskaperna i en CSS-transformmatris med rymdkoordinaterna i pixlar.

När kortet släpps (e.isFinal) sätter vi tillbaka övergångsegenskaperna, så det kan gå tillbaka smidigt över toppen av däcket (lätthet ut).

Du kan frestas att ändra de övre och vänstra egenskaperna istället för att ta itu med translateX och translateY-egenskaper, men moderna webbläsare gör ett fantastiskt arbete under huven - genom att använda enhetens GPU - för att visa smidiga övergångar när ändringar i CSS transformationsegenskaper tillämpas.

Steg 5–45 rotationsskuggor

Om du någonsin använde Tinder-appen har du förmodligen märkt att ju mer du drar mot skärmens vertikala gränser, desto mer roterar kortet i den valda riktningen.

För att kopiera den här funktionen måste vi beräkna ett värde mellan 0 och +/- 45 grader baserat på förhållandet mellan kortpositionen på X-axeln och den totala bredden på vyn.

Steg 6 - Jag tror att jag kan flyga!

När fingerpositionen når en viss tröskel ska kortet kastas i den valda riktningen när det släpps.

För att göra det kan vi återanvända beräkningarna som gjorts tidigare och tillämpa de siffrorna för att veta om vi ska sätta kortet tillbaka på toppen av däcket eller inte i slutet av pan-gesten.

Steg 7 - Hit en annan!

Det är dags att lägga till kort programmatiskt efter varje framgångsrik svep (tack vare picsum.photos för sina praktiska API-bilder för platshållare):

Lägg ett andra kort inuti #board div:

Låt oss nu lägga till ett nytt kort efter varje framgångsrik svep:

Med tanke på att vi skapar en ny Hammer-instans om och om igen efter varje framgångsrik svep, bör vi förstöra den föregående för att förbättra minnesallokeringen; lägg till följande rad i handtagsmetoden, strax innan du kallar nya Hammer:

Steg 8 - Visuella effekter

I den ursprungliga karusellen skalas det andra kortet långsamt upp i storlek så snart det första börjar lämna däcket; dessutom inträffar en trevlig knöleffekt när användaren knackar på kortets vertikala sidor.

För den senare effekten måste vi lyssna på tapphändelsen, för den förstnämnda måste vi tillämpa förhållandet mellan kortets X-position och den totala bredden på vyn till CSS-skala transformera egenskap.

låt skala = (95 + (5 * Math.abs (propX))) / 100)

Kom ihåg att ställa in ett standardskalavärde på 95% till .card CSS-klass.

transform: translateX (-50%) translateY (-50%) skala (0,95);

Här den kompletta karusellklassen:

Vill ha mer?

Om du gillade den här tutorialen - snälla - klappa, dela & stjärna.

https://github.com/simonepm/likecarousel