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

Gereksinimler ve Ön Hazırlık

Bu projeyi gerçekleştirmek için temel düzeyde Html5 ve Css3 bilgisine sahip olmanız yeterlidir. Modern bir tarayıcı (Chrome, Firefox, Edge veya Safari) ve kod düzenleyici (VS Code gibi) dışında herhangi bir kuruluma ihtiyacınız yoktur. Projenizin dosya yapısını şu şekilde oluşturmanızı öneririm: bir index.html dosyası ve bir style.css dosyası.

Ön hazırlık aşamasında, karşılaştırmak istediğiniz iki görselin boyutlarının aynı olması, görsel kaymalarını önlemek adına kritiktir. İdeal olarak, aynı çözünürlükte iki görsel hazırlayarak işe başlayabilirsiniz.

Temel Html Yapısının Kurulması

Görsel karşılaştırma panelinin iskeletini oluştururken, kapsayıcı bir div yapısı ve içerisinde iki ayrı görsel katmanı kullanacağız. Bu yapı, CSS ile görselin bir kısmını maskelememize olanak tanır.

Yukarıdaki kod bloğunda, gorsel-ust katmanı, gorsel-alt katmanının üzerinde konumlandırılacaktır. input etiketi ise kullanıcının sürükleme işlemini gerçekleştireceği kontrol mekanizmasıdır.

Css ile Görsel Katmanlarını Hizalama

Görsellerin üst üste binmesi ve sadece istenen kısmın görünmesi için CSS konumlandırma özelliklerini (absolute positioning) kullanacağız. Bu adım, görselin "kesilme" etkisini yaratan en önemli kısımdır.

.karsilastirma-paneli {
  position: relative;
  width: 100%;
  max-width: 800px;
  overflow: hidden;
}

.gorsel-alt, .gorsel-ust {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.gorsel-ust {
  width: 50%; /* Başlangıç değeri */
  overflow: hidden;
  border-right: 2px solid white;
}

Bu CSS kodları, gorsel-ust sınıfına sahip olan görselin genişliğini kontrol ederek, alttaki görselin ne kadarının görüneceğini belirler. overflow: hidden özelliği, taşan kısımların gizlenmesini sağlar.

Slider Kontrolü ve Etkileşim

Kullanıcının sürükleme deneyimini iyileştirmek için HTML range input bileşenini özelleştirmemiz gerekir. Bu, görselin üzerine yerleştirilen şeffaf bir katman gibi çalışır.

.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: ew-resize;
  opacity: 0; /* Görünmez yapıp sadece işlevini kullanıyoruz */
}

Slider'ı tamamen şeffaf yaparak, kullanıcının görselin herhangi bir yerine tıklayıp sürüklediğinde karşılaştırma işlemini yapabilmesini sağlıyoruz. Bu, mobil cihazlarda çok daha iyi bir kullanıcı deneyimi sunar.

Görsel Karşılaştırma Yöntemleri Karşılaştırma Tablosu

Farklı yöntemlerin avantajlarını ve dezavantajlarını anlamak, projenizin ölçeğine göre karar vermenize yardımcı olacaktır.

Dinamik Etkileşim İçin JavaScript Entegrasyonu

CSS tek başına görselin genişliğini dinamik olarak değiştiremez. Bu noktada, kullanıcının slider hareketini yakalayıp gorsel-ust genişliğini güncelleyen küçük bir JavaScript fonksiyonuna ihtiyacımız var.

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

slider.addEventListener('input', (e) => {
  ustGorsel.style.width = e.target.value + '%';
});

Bu kod bloğu, input olayını dinler ve slider'ın o anki değerini gorsel-ust katmanının genişliğine atar. Böylece sürükleme sırasında görselin kesilme noktası anlık olarak değişir.

Güvenlik Uyarısı: Web projelerinizde kullanıcıdan gelen verileri işlerken her zaman XSS (Cross-Site Scripting) saldırılarına karşı dikkatli olun. Bu örnekte doğrudan DOM manipülasyonu yapıldığı için dışarıdan gelen verileri (örneğin kullanıcı tarafından sağlanan görsel URL'leri) mutlaka sanitize (temizleme) işleminden geçirin.

Sıkça Sorulan Sorular

Görseller farklı boyutlardaysa ne yapmalıyım?

Görsellerin object-fit: cover CSS özelliği ile aynı en-boy oranına sahip olmasını sağlamalısınız. Aksi takdirde karşılaştırma paneli görsel kaymalarına neden olur.

Mobil cihazlarda dokunmatik desteği nasıl olur?

HTML range input bileşeni, tarayıcılar tarafından dokunmatik cihazlarda otomatik olarak desteklenir. Ek bir ayar yapmanıza gerek kalmaz.

Birden fazla karşılaştırma panelini aynı sayfada kullanabilir miyim?

Evet, ancak sınıf isimlerini (class) benzersiz yapmalı veya JavaScript fonksiyonunuzu tüm panelleri kapsayacak şekilde (querySelectorAll ile) güncellemelisiniz.

Bu yapı SEO'yu etkiler mi?

Görsellerin alt etiketlerini doğru doldurursanız, arama motorları görsellerinizi daha iyi indeksler. Bu yapı SEO dostudur.

Performans için görsel boyutlarını nasıl optimize ederim?

WebP formatını kullanarak görsellerin dosya boyutunu %30 ile %50 arasında küçültebilirsiniz. Bu, sayfa yüklenme hızını doğrudan artırır.

İleri Düzey Özelleştirme: CSS Geçişleri ve Yumuşatma Efektleri

Kullanıcı deneyimini bir üst seviyeye taşımak için sürükleme çubuğunun hareketini daha akıcı hale getirebiliriz. CSS transition özelliği, slider hareketlerini doğal bir hisse kavuşturmak için mükemmel bir araçtır. Özellikle kullanıcı fareyi bıraktığında slider'ın belirli bir noktaya hızla oturmasını sağlamak, profesyonel bir arayüzün anahtarıdır.

Aşağıdaki CSS kodu, slider hareketlerine yumuşak bir ivme kazandırır:

.slider-container {
    transition: width 0.2s ease-out;
}

.slider-handle {
    transition: transform 0.1s ease-in-out;
}

/* Kullanıcı sürüklemeyi bıraktığında yumuşak geçiş */
.slider-handle:active {
    transform: scale(1.1);
}

Alternatif Yaklaşım: CSS "Clip-Path" ile Performans Optimizasyonu

Geleneksel overflow: hidden yöntemi yerine clip-path kullanmak, özellikle karmaşık katmanlı yapılarda tarayıcı yükünü azaltabilir. Bu yöntem, görselin sadece belirli bir kısmının "kesilerek" gösterilmesini sağlar ve GPU hızlandırmasından daha etkin yararlanır.

İşte clip-path kullanarak görseli dinamik olarak kırpan örnek yapı:

.after-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Başlangıçta görselin %50'sini gösterir */
    clip-path: inset(0 50% 0 0); 
}

JavaScript tarafında slider hareket ettikçe bu değeri güncelleyerek çok daha performanslı bir "öncesi-sonrası" deneyimi elde edebilirsiniz:

const slider = document.querySelector('.slider');
const afterImage = document.querySelector('.after-image');

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

Hata Ayıklama ve Yaygın Sorun Giderme İpuçları

Görsel karşılaştırma panellerinde en sık karşılaşılan sorunlar genellikle koordinat hesaplamaları ve z-index çakışmalarıdır. Projenizi yayına almadan önce şu kontrol listesini uygulamanız önerilir:

• Koordinat Kaymaları: Eğer slider çubuğu görselin dışına taşıyorsa, box-sizing: border-box kuralının hem kapsayıcıya hem de görsellere uygulandığından emin olun.
• Z-Index Çakışmaları: Slider tutamacının (handle) görsellerin altında kalmasını engellemek için z-index: 10 gibi yüksek bir değer atayın.
• Görsel Boyut Uyumu: İki görselin de aynı en-boy oranına (aspect-ratio) sahip olduğundan emin olun. Farklı boyutlardaki görseller için object-fit: cover kullanmak görsel bozulmalarını engeller.

İpucu: Eğer görselleriniz farklı boyutlardaysa, kapsayıcıya aspect-ratio: 16 / 9; ekleyerek her iki görselin de aynı alana sığmasını zorunlu kılabilirsiniz.

Sonuç

Html & Css ile özelleştirilebilir bir görsel karşılaştırma paneli yapmak, modern web geliştirme süreçlerinde oldukça temel ama etkili bir yetkinliktir. Bu rehberde öğrendiğiniz teknikleri kullanarak, kendi projelerinizde öncesi-sonrası görsellerini profesyonel bir şekilde sunabilirsiniz. Bir sonraki adım olarak, bu yapıya CSS geçişleri (transitions) ekleyerek sürükleme işlemini daha yumuşak hale getirmeyi deneyebilirsiniz. Başarılar dileriz.