Html & Css İle Özelleştirilebilir Bir Görsel Karşılaştırma Aracı Nasıl Yapılır?

Gereksinimler ve Hazırlık

Projeye başlamadan önce modern bir kod editörüne (VS Code gibi) ve temel düzeyde HTML/CSS bilgisine sahip olmanız yeterlidir. Herhangi bir derleyici veya kurulum gerektirmez; tarayıcınızın modern CSS özelliklerini desteklemesi yeterlidir.

• Modern bir web tarayıcısı (Chrome, Firefox, Edge veya Safari'nin güncel sürümleri).
• Proje klasörünüzde yer alacak iki adet aynı boyutlarda görsel (Örn: oncesi.jpg ve sonrasi.jpg).
• Temel CSS ve HTML sözdizimi bilgisi.

HTML Yapısının Kurulması

İlk adımda, görsellerimizi iç içe geçireceğimiz ve kaydırma çubuğunu (slider) kontrol edeceğimiz kapsayıcı yapıyı oluşturuyoruz. HTML yapısı, karşılaştırma aracının iskeletidir.

Burada input elemanını bir slider olarak kullanıyoruz. min ve max değerleri, görselin ne kadarının gösterileceğini yüzde bazında belirlememize olanak tanır.

CSS ile Görsel Katmanlarını Hizalama

Görsellerin birbirinin tam üzerinde durması ve clip-path ile kırpılması gerekir. CSS'in absolute konumlandırma özelliği ile görselleri üst üste bindiriyoruz.

.karsilastirma-konteyner {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.gorsel-ust {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 0); /* Başlangıçta %50'si görünür */
}

.gorsel-ust img, .gorsel-alt img {
  width: 600px;
  height: 400px;
  object-fit: cover;
}

clip-path: inset() özelliği, görselin belirli bir kısmını kesip göstermemizi sağlar. Bu, görsel karşılaştırma aracının kalbidir.

JavaScript ile İnteraktif Slider Entegrasyonu

HTML ve CSS tek başına statik kalır; kullanıcı slider'ı hareket ettirdiğinde clip-path değerini dinamik olarak değiştirmek için JavaScript kullanmamız gerekir. Bu işlem, kullanıcı deneyimini gerçek zamanlı hale getirir.

const slider = document.querySelector('.slider');
const ustGorsel = document.querySelector('.gorsel-ust');

slider.addEventListener('input', (e) => {
  let deger = e.target.value;
  ustGorsel.style.clipPath = `inset(0 ${100 - deger}% 0 0)`;
});

Bu kod bloğu, slider her hareket ettiğinde clip-path değerini güncelleyerek görselin açılıp kapanmasını sağlar. input olayı, sürükleme işlemi sırasında sürekli tetiklenerek pürüzsüz bir geçiş sunar.

Özelleştirme ve Stil Geliştirmeleri

Aracınızı markanıza uygun hale getirmek için slider'ı özelleştirebilirsiniz. CSS appearance: none özelliği ile varsayılan tarayıcı stilini kaldırıp kendi tasarımınızı uygulayabilirsiniz.

.slider {
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 10;
  appearance: none;
  background: transparent;
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  border: 2px solid #333;
}

Bu düzenleme, slider'ın kullanıcı tarafından daha kolay fark edilmesini ve estetik görünmesini sağlar.

Karşılaştırma Yöntemleri ve Analiz

Görsel karşılaştırma araçları geliştirirken farklı yöntemler tercih edilebilir. Aşağıdaki tablo, farklı yaklaşımların avantaj ve dezavantajlarını özetlemektedir.

Güvenlik Uyarısı: Kullanıcıdan alınan verileri veya dış kaynaklı görselleri kullanırken XSS (Cross-Site Scripting) riskine karşı görsellerin kaynağını doğrulayın. Dinamik görsel yükleme işlemlerinde mutlaka dosya uzantısı kontrolü yapın.

Sıkça Sorulan Sorular

Görsel karşılaştırma aracı mobil cihazlarda çalışır mı?

Evet, yukarıdaki kod yapısı responsive (duyarlı) tasarım prensiplerine uygundur. Konteyner genişliğini yüzde (%) olarak ayarlarsanız mobil cihazlarda da sorunsuz çalışacaktır.

İkiden fazla görseli karşılaştırabilir miyim?

Bu yöntem iki görsel için optimize edilmiştir. İkiden fazla görsel için katmanlı bir yapı ve farklı slider mantıkları kurmanız gerekir.

Performans kaybı yaşanır mı?

CSS clip-path donanım hızlandırmalı bir özelliktir. Çok yüksek çözünürlüklü görseller kullanmadığınız sürece performans kaybı yaşanmaz.

Tarayıcı desteği nasıldır?

Güncel tüm modern tarayıcılar (Chrome, Firefox, Edge, Safari) clip-path özelliğini tam desteklemektedir.

Görsellerin boyutu farklı olursa ne olur?

Görsellerin aynı boyutta olması, karşılaştırma aracının doğru çalışması için kritiktir. Farklı boyutlardaki görseller için CSS object-fit: cover kullanarak görselleri aynı boyuta zorlayabilirsiniz.

İleri Düzey İpuçları: Performans Optimizasyonu ve Erişilebilirlik

Görsel karşılaştırma aracınızı daha profesyonel hale getirmek için sadece işlevsellik yeterli değildir. Kullanıcı deneyimini iyileştirmek adına görsellerin yüklenme sürelerini optimize etmeli ve klavye ile erişilebilirliği sağlamalısınız.

Görsel Yükleme Stratejileri

Kullanıcı sayfayı açtığında iki yüksek çözünürlüklü görselin aynı anda yüklenmesi, özellikle mobil ağlarda gecikmelere neden olur. loading="lazy" özniteliğini kullanarak görsellerin yalnızca ekrana geldiklerinde yüklenmesini sağlayabilirsiniz.

Klavye ile Kontrol Desteği

Fare kullanmayan kullanıcılar için slider'ı klavyenin ok tuşlarıyla hareket ettirebilir hale getirmek, WCAG erişilebilirlik standartlarına uyum sağlamanıza yardımcı olur. Aşağıdaki JavaScript bloğu, slider bileşenine odaklanıldığında ok tuşlarıyla kontrol imkanı sunar.

const slider = document.querySelector('.slider-handle');
slider.addEventListener('keydown', (e) => {
    let position = parseInt(slider.style.left) || 50;
    if (e.key === 'ArrowLeft') {
        position = Math.max(0, position - 5);
    } else if (e.key === 'ArrowRight') {
        position = Math.min(100, position + 5);
    }
    slider.style.left = position + '%';
    document.querySelector('.after-image').style.clipPath = `inset(0 0 0 ${position}%)`;
});

Hata Ayıklama ve Yaygın Sorunların Çözümü

Geliştirme sürecinde karşılaşılabilecek en yaygın sorunlar genellikle CSS koordinatları ve JavaScript olay dinleyicileri (event listeners) ile ilgilidir. İşte hızlı çözüm rehberi:

Dokunmatik Cihazlar İçin Optimizasyon

Mobil cihazlarda mousemove olayı yerine touchmove olayını dinlemek, kullanıcıların parmaklarıyla kaydırma yaparken sayfanın aşağı kaymasını engellemek için e.preventDefault() kullanmanızı gerektirir. Bu sayede sürükleme işlemi akıcı hale gelir.

slider.addEventListener('touchmove', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const containerRect = document.querySelector('.container').getBoundingClientRect();
    let x = ((touch.clientX - containerRect.left) / containerRect.width) * 100;
    // Sınırlandırma mantığı buraya eklenebilir
    slider.style.left = x + '%';
});

Sonuç

HTML ve CSS kullanarak kendi görsel karşılaştırma aracınızı oluşturmak, hem teknik becerilerinizi geliştirir hem de kullanıcılarınıza profesyonel bir deneyim sunmanızı sağlar. Bu rehberde öğrendiğiniz clip-path ve JavaScript etkileşimi, web projelerinizde birçok farklı interaktif bileşen oluşturmak için temel teşkil eder.

Bir sonraki adım olarak, bu araca "dikey karşılaştırma" modu eklemeyi veya görseller üzerine açıklama metinleri (tooltip) yerleştirmeyi deneyebilirsiniz. Kodunuzu her zaman temiz tutun ve farklı ekran çözünürlüklerinde test etmeyi ihmal etmeyin.