Bu yazımda da yukarıda hızlı kod yazımı videosunu izleyebileceğiniz başka bir örnekten bahsedeceğim. İki görseli üst üste koyacağız ve en üste koyacağımız bir element ile bu görselleri birbiri ile karşılaştırabileceğiz. Örneğin kodlarına buradan ulaşabilirsiniz.
Öncelikle HTML elementlerimizi yerleştiriyoruz. ba-wrap sınıfında bir div oluşturup diğer elementlerimizi bunun içine yerleştirelim. Bu div içine left ve right sınıflı iki img elementi ve handle sınıfında bir div elementi ekliyoruz. Görsellerin aynı boyutta olmaları önemli.
CSS tarafında da karmaşık durum yok. ba-wrap elementimize genişliğimizi veriyoruz. Diğer elementleri position:absolute olarak kullanıyoruz. handle elementimize ayrıca transform: translateX(0) veriyoruz ki Javascript tarafında bu stili kullanınca referans olarak sıfırda olduğundan emin olalım. Ayrıca yeni bir DOM elementi kullanmak yerine handle::after sanal(pseudo) elementini kullanarak yuvarlak, beyaz, üzerine tıklayıp sürükleyebileceğimiz bir görüntü elde ediyoruz.
Ve tüm işin yapıldığı Javascript tarafına geliyoruz. Öncelikle beforeAfter adında bir değişken oluşturup buna kendini çağıran/çalıştıran bir fonksiyon ataması yapıyoruz. DOM elementlerimizi uyumlu isimde değişkenlerimize atıyoruz.
document.body.onload olayında görselimizin genişliğini ve yüksekliğini alarak bunu handle‘a yüksekli vermek ve ba-wrap‘in ortasına konumlamak için kullanıyoruz. Ayrıca clip stili özelliği ile right sınıflı görselimizin de yarısını kesiyoruz.
Burada dikkat edilmesi gereken nokta, mousemove olayını window için çağırmamız gerekiyor, aksi halde hızlı hareketlerde kullanılamaz oluyor. mousedown olayını da handle elementimize veriyoruz. Bu olayda isDragging değişkenini true yaparak mousemove olayına bağladığımız fonksiyonun çalışmaya devam etmesini sağlıyoruz. Tersi şekilde mouseup olayında da bu değişkeni false yapıp mousemove olayına bağlı fonksiyonu pasifleştirmiş oluyoruz.
handle elementimizin konumunu handleTranslateX adındaki değişkende tutuyoruz. Bu değişken için alt ve üst limitler vererek ba-wrap dışına sürüklemeleri engellemiş oluyoruz.
onDragHandle fonksiyonu her bir mouse hareketinde çağırılıyor. mousePreviousX ile tuttuğumuz bir önceki mouse X konumu ile şimdiki konumu arasındaki fark kadar handle elementimizi oynatıyoruz. handle konumuna göre right görselimize clip stilimizi veriyoruz.
Bir cevap yazın