YAZILAR

Bu işlemler yalnızca mobil cihazlar için geçerlidir.

Herşeyden önce son halini bir görelim.

Bu yazıda sadece javascript tarafını inceliyor olacağız. Aşağıda style.css son halini bulabilirsiniz.

Ve index.html dosyamızın son hali de burada.

İşte Vanilla JS yazarak yaptığımız işlemler de burada.

Önce, .swipable class’larımızı seçelim.

Kodumuzun üstünde kaydırma hassasiyetimizi ayarlama için treshold değişkeni tanımladık.

Bu örneğimizde, kaydırılabilir elementimiz, sadece X ekseninde kaydırılabilecek.

Bunun için 3 temel değişkenimiz var.

diff değişkeni sürükleme mesafesinin sonucu olacak.

Diğer değişkenler ise basitçe sürüklemeyi başlattığımız ve bitirdiğimiz noktalar olacak.

Dokunma işlemini yakalamak için touchstart etkinliğini dinliyoruz. Bu etkinlikte ilk dokunma noktasını tespit edip touchstartX değişkenine atayabiliriz. Daha sonra, dokunuşumuzu izlemek için geçiş süresini 0 saniyeye ayarlıyoruz.

Bu da bizim touchend etkinliğimiz.

Yukarıda touchmove etkinliğini dinledik. Bu etkinlikte touchstart ve şuanda hangi noktaya dokunuyorsak arasındaki mesafeyi ölçebiliriz. Devamında çıkan sonucu diff değişkenine atayabiliriz.

Böylelikle, çıkan sonuç ile kaydırılmasını istediğimiz elementin kaydırma esnasında ekranda X eksenin hangi konumda bulunacağını ayarlayabiliriz.

Şimdi de dokunma etkinliklerimizde sonuncusunu ayarlayalım.

Yukarıda dokunmayı bitirdiğimiz noktayı touchendX değişkenine kaydettik.

Ve yeterince kaydırılmazsa eski konuma yavaşça geri dönmesi için animasyon süresini ayarladık.

handleGesture fonkisyonu bizin son fonksiyonumuz olacak. Bu fonksiyon kaydırma işlemine karar verecek.

Ve son hali…

Kodları incelemek için GitHub reposuna buradan ulaşabilirsiniz.