Bu örneğimizde de alışveriş sitelerinde çok kullanılan görsel üzerine imleç ile gelindiğinde yakınlaşma, detay gösterme özelliğini yapacağız. Yukarıda kod yazım videosunu izleyerek sonucu görebilirsiniz. Kodlar için de github linki burada. Küçük ve basit ama kullanışlı bir örnek olacak.
Diğer projeler gibi buna da html dosyamız ile başlıyoruz. index.html dosyamızı oluşturuyoruz, css ve javascript dosyalarına gerekli bağlantıları verip, body elementi içine magnify sınıflı bir img elementi ekliyoruz.
CSS dosyamızda magnify sınıfına bir genişlik ve position:relative veriyoruz. Büyüteç olacak elementimize vereceğimiz glass sınıfına da uygun stilleri veriyoruz.
Sıra javascript dosyamızda. magnify adında bir değişken tanımlıyoruz ve büyütme işiyle alakalı tüm işlemleri bu değişken içinde yapacağız.
Görselimizi bir değişken tanımlayıp buna atıyoruz. Büyüteç için bir div elementi oluşturup buna glass sınıfını ve genişlik yükseklik ve arkaplan görselini stil olarak tanımlıyoruz.
isVisible adında bir değişken kullanıyoruz. Bu değişkeni imleç görsel üzerindeyken true değilken false olacak şekilde, event‘ler yardımı ile, ayarlıyoruz. İmleç hareketi olayında -mousemove event- isVisible‘ı kontrol ederek imleç pozisyonunun görselin yüzde kaçlık bölümlerinde olacağını hesaplayıp glass elementimize stil olarak eklemeleri yapıyoruz ve büyütecimiz hazır.
Bir cevap yazın