ZooMove: Fare Üzerindeyken Görseli Büyüten jQuery Eklentisi
E-ticaret sitelerine göz attıysanız, görüntü yaklaştırma efektini muhtemelen görmüşsünüzdür. Ürün fotoğrafının üzerine geliyorsunuz ve görüntünün bu kısmı daha net bir görünüm elde etmek için büyütülüyor.
ZooMove eklentisi, bu efekti sitenizde uygulamanın harika bir yoludur. JQuery tarafından desteklenmektedir, bu nedenle bunu fazla kod olmadan çabucak ve hızlıca çalıştırabilirsiniz.
ZooMove, tamamen meraklı geliştiriciler için GitHub‘da bulunan tamamen ücretsiz ve açık kaynaktır. Npm, Bower, Yarn ile kurulabilir veya doğrudan CDNJS‘den indirilebilir.
ZooMove görüntüsü oluşturmak için sayfanızın üstbilgisinde üç özel dosya bulunması gerekir:
- jQuery
- ZooMove CSS
- ZooMove JS
Daha hızlı sayfa yükleme isterseniz, her iki ZooMove dosyası küçültülebilir. İsterseniz CSS dosyasını ana stil sayfanıza da ekleyebilirsiniz.
Tüm gerçek büyü HTML’de nerede olur, farklı efektler için data-* attributes ayarlayabilirsiniz.
Bu, dört farklı parametreye dayanarak kendi özel yakınlaştırma efektinizi geliştirmenizi sağlar:
data-zoo-scale – gezinirken toplam zum boyutunu tanımlar (ör.% 200 için% 2.0)
data-zoo-move – resmin imlecin yanında hareket edip etmediğini tanımlar
data-zoo-over – yakınlaştırılmış görüntünün orijinalin üzerinde görünmesini tanımlar
data-zoo-cursor – imleç noktasını tanımlar
Son beşinci parametre, yeni resim URL’sinin ne olacağını tanımlamanızı sağlar (gerekirse).
ZooMove’u IE9 + da dahil olmak üzere tüm yaygın tarayıcılarda kullanabilirsiniz. Bu eklenti yaygın olarak desteklenmektedir ve kullanıcı deneyimini arttırmakta önemli bir yer sağlar.
ZooMove basit hover-to-zoom library arıyorsanız mükemmel bir seçimdir. Herhangi bir web sitesinde yayınlanmaya yetecek kadar hafiftir ve jQuery tarafından desteklenmektedir, bu nedenle çalışabilmesi için daha fazla kod yazmanız gerekmez.
Hareketi görmek için projenin ana sayfasını ziyaret edin ve daha fazla bilgi edinmek için GitHub’daki belgelere bakın.
Bu makalede genelde e-ticaret sitelerinde karşımıza çıkan, fare ile üzerine gelindiğinde görsel yakınlaştırma efektini uygulayan jQuery eklentisinden bahsettik. Bu konu hakkındaki düşüncelerinizi yorum yaparak bizlerle paylaşabilirsiniz.
