Görsellerinize Büyüteç ile Bakın

Vatanay Özbeyli CSS3, HTML5, jQuery, Tasarım Unsurları

CSS Büyüteç

Günümüzde neredeyse çoğu grafik sitesi görselleri için büyüteç tekniğini kullanmakta. Hatta sık sık ziyaret ettiğimiz alışveriş siteleri bile ürünlerini daha iyi sunmak için bu tekniği kullanmakta.

Peki nasıl oluyorda imleci görsellerin üzerine getirince bir mercek içinden bakabiliyoruz? Bu makalemde bu soruyu birlikte cevap arayacağız.

Biraz CSS, biraz HTML ve biraz da jQuery… Hadi başlayalım!

ÖRNEĞİ GÖRÜNTÜLE

Başlangıç

HTML ile yayınlayacağımız görseli biraz küçülteceğiz. JavaScript ile ise görselin orjinal boyutunu çekip CSS ile hazırladığımız mercek sayesinde listeleyeceğiz. Bu işlemi aktif ve ilgi çekici kılmak için ise jQuery kütüphanesine el atacağız.

Sayfanızın <head></head> tagları arasına aşağıdaki jQuery linkini ekleyerek başlayın.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

CSS kodları

Tasarımımızı oluşturmaya başlayalım. Ben büyüteç alanı için 400px değerini girdim. Buraya dikkat, bu alan aşağıdaki HTML kodundaki resmin width değeriyle aynı olmak zorunda.

.buyutec {
width: 400px;
margin: 50px auto;
position: relative;
cursor: none}

.mercek {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
display: none;
}

.kucuk { display: block;}

Yukarıdaki CSS kodlarını da sayfanıza eklediyseniz sırada JS kodlarımız var.

JavaScript kodları

Buradaki kodları ise <head></head> içerisinde, jQuery‘i eklediğiniz yerin hemen altına yazabilirsiniz.

<script>
$(document).ready(function(){
var gercek_uzunluk = 0;
var gercek_genislik = 0;
$(".mercek").css("background","url('" + $(".kucuk").attr("src") + "') no-repeat");
$(".buyutec").mousemove(function(e){
if(!gercek_uzunluk && !gercek_genislik)
{
var image_object = new Image();
image_object.src = $(".kucuk").attr("src");
gercek_uzunluk = image_object.width;
gercek_genislik = image_object.height;
}else{
var buyutec_offset = $(this).offset();
var mx = e.pageX - buyutec_offset.left;
var my = e.pageY - buyutec_offset.top;
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{$(".mercek").fadeIn(100);}
else{$(".mercek").fadeOut(100);}
if($(".mercek").is(":visible"))
{
var rx = Math.round(mx/$(".kucuk").width()*gercek_uzunluk - $(".mercek").width()/2)*-1;
var ry = Math.round(my/$(".kucuk").height()*gercek_genislik - $(".mercek").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
var px = mx - $(".mercek").width()/2;
var py = my - $(".mercek").height()/2;
$(".mercek").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
</script>

HTML kodları

Sırada görselimizi eklemek var. Tekrar belirtiyorum. Buradaki görselin width değeri CSS kodumuzdaki buyutec classının width değeriyle aynı olmak durumunda. Aksi durumlarda görselinizin dışarıda kalan alanlarında büyüteç çalışmayacaktır.

<div class="buyutec">
<div class="mercek"></div>
<img class="kucuk" src="GÖRSEL-ADRESİ.jpg" width="400"/>
</div>

Ve her şey hazır.

Bu da ilginizi çekebilir  Web sayfanız için en iyi Video Player hangisi?

Kapanış

Günümüzde jQuery kullanmayan web uygulaması kalmadı sanırım. Dahili olarak ise eklediğimiz birkaç satır CSS ve JS. İşte bütün bu basitlik hazırladığımız bu büyüteç örneğini gayet pratik ve kullanılır kılıyor. Bir o kadar da hızlı.