Készítsen egy teljes funkcionalitású borítékot, mint a körhinta a Vanilla JavaScript-ben

A randevú világon kívüli gondolkodás esetén a balra vagy jobbra való elmozdulás fogalmát sokféle esetben lehet alkalmazni azzal a céllal, hogy bármilyen témával kapcsolatos felhasználói preferenciákat gyűjtsenek.

Ebben az összefüggésben úgy döntöttem, hogy önmagában építem fel a „Like Carousel” -t tiszta JavaScript-en, és megosztom veled a tapasztalataimat.

A csúszós körhinta FIFO csomagolt kártyákként tekinthető. A jobb oldali ellop a legfelső kártyán „tetszik”, másik irányban „nem tetszik”. Ezenkívül a képernyő felső határa felé történő ellop is „szuper-szerű”. Amikor az első kártyát eldobják, a második a helyére kerül, amíg több kártya nincs a pakliban.

Ezt fogjuk elérni:

Szép! Nem igaz?

1. lépés - Csináljuk meg

Első lépésként indulási oldalt fogunk írni a projektünkhöz:

A #board div a vászonunk és minden közvetlen gyermek, akinek. osztálya van a pakli elemének. Tekintettel arra, hogy a böngészők megjelenési sorrend szerint indexálják az abszolút pozícionált osztásokat, tudjuk, hogy az utolsó .card elem mindig a legfelső kártya.

2. lépés - CSS a mentéshez!

Ha megpróbáljuk megnyitni weboldalunkat, akkor csak egy fehér képernyő jelenik meg. CSS a mentésre!

Az eredmény egy fehér kártya legyen, egy kissé szürke háttér közepén.

3. lépés - Ez egyfajta varázslat

Most el kell készítenünk az ellopási eseményt, amint a felhasználó interakcióba lép a kártyával.

Ennek érdekében a csodálatos HammerJS könyvtárat választottam.

A Hammer egy nyílt forráskódú könyvtár, amely felismeri a gesztusokat érintéssel, egérrel és a mutató-eseményekkel. Nincs függősége és kicsi.

A Hammer könyvtárat is beleértve (v2.0.8 az írás idején), elkezdhetjük az osztály építését, amely a gesztusokat kezeli:

4. lépés - Gyere, lépj tovább!

Hammer sok információt továbbít az észlelt gesztusokról, mint érv a visszahívási funkciókról, amelyeket átadunk annak felismerõinek.

Írjunk egy olyan logikát, amely a kártyát húzva a mutatóval együtt mozgatja, majd elengedés után visszaugrik.

Amikor a felhasználó elkezdi húzni a kártyát, tároljuk a kezdeti koordinátákat és eltávolítjuk a CSS átmeneti tulajdonságát annak érdekében, hogy a mutatóval azonos sebességgel mozogjunk.

Mivel nem ismerjük a CSS translateX és translateY mértékegységeit, hívjuk a getComputedStyle-t, hogy fordítsuk le a létező tulajdonságokat egy CSS-transzformációs mátrixban a térbeli koordinátákkal pixelben.

Amikor a kártya elengedésre kerül (e.isFinal), visszaállítjuk az átmeneti tulajdonságokat, így simán visszatérhet a fedélzet tetejére (könnyedén).

Kísértés lehet arra, hogy a translateX és a translateY tulajdonságokkal való foglalkozás helyett megváltoztassa a felső és a bal oldali tulajdonságokat, ám a modern böngészők csodálatos munkát végeznek a motorháztető alatt - a készülék GPU használatával -, hogy a CSS-be történő változtatások során simán jelenjenek meg az átmenetek. a transzformációs tulajdonságokat alkalmazzuk.

5-45 lépés a forgásirányban

Ha valaha is használta a Tinder alkalmazást, akkor valószínűleg észrevette, hogy minél inkább húzza a képernyő függőleges szegélyei felé, annál inkább elfordul a kártya a kiválasztott irányba.

Ennek a szolgáltatásnak a megismétléséhez ki kell számítanunk egy 0 és +/- 45 fok közötti értéket az X tengelyen lévő kártya helyzetének és a nézet teljes szélességének aránya alapján.

6. lépés - Azt hiszem, tudok repülni!

Amikor az ujjpozíció eléri egy bizonyos küszöböt, akkor a kártyát a kiválasztott irányba kell dobni, amikor elengedik.

Ennek érdekében újra felhasználhatjuk a korábban elvégzett számításokat, és felhasználhatjuk ezeket a számokat, hogy megtudjuk, vajon vissza kell-e helyezni a kártyát a fedélzet tetejére, vagy sem a pásztázó gesztus végére.

7. lépés - Találj meg még egyet!

Ideje hozzátenni kártyákat programozottan minden sikeres ellop után (köszönhetően a picsum.photos praktikus helyőrző képeinek API-jának):

Helyezzen egy második kártyát a #board div részbe:

Most adjunk hozzá egy új kártyát minden sikeres ellop után:

Mivel minden sikeres ellop után újra és újra létrehozunk egy új Hammer példányt, el kell pusztítanunk az előzőt, hogy javítsuk a memóriaelosztást; add hozzá a következő sort a fogantyú módszerhez, közvetlenül az új Hammer meghívása előtt:

8. lépés - Vizuális effektusok

Az eredeti körhintaban a második kártya lassan növekszik, amint az első elindul a pakliból; ezenkívül szép ütéshatás akkor jelentkezik, amikor a felhasználó a kártya függőleges oldalára koppint.

Az utóbbi hatáshoz meg kell hallgatnunk a tapintási eseményt, az előbbihez újra alkalmaznunk kell a kártya X pozíciója és a nézet teljes szélessége közötti arányt a CSS skála transzformációs tulajdonságához.

legyen skála = (95 + (5 * Math.abs (propX))) / 100)

Ne felejtse el beállítani az alapértelmezett skálaértéket 95% -ra a .card CSS osztályra.

transzformáció: translateX (-50%) translateY (-50%) skála (0,95);

Itt a teljes körhinta osztály:

Többet akar?

Ha tetszett ez az oktatóprogram - kérlek - tapsolj, ossza meg és csillagold.

https://github.com/simonepm/likecarousel