İçerikler
Mouse ile görsellerin üzerine gelindiğinde zoom özelliğini CSS ve JQUERY yardımıyla hiç bir eklenti kullanmadan gerçekleştirebilirsiniz. Eklenti kullanmadan bu işlemi az kod satırla yapmanız, bu işlemi gerçekleştirdiğiniz sayfanın daha hızlı açılmasını sağlayacaktır. Böylece az kod ile istenilen performansa sahip olacaksınız. Ayrıca hız konusunda kaybınızın olmaması da cabası.
Resimlere Zoom Efekti Verme
Resim dosyalarına zoom efekti vermek için CSS ve JQUERY kodları yazmak yeterli olacaktır. Yazacağımız kodun kısa bir tanımlamadan ibaret oluşuda bu uygulamanın sitenizi yavaşlatmayacağı anlamına gelmektedir. Aynı zamanda eklenti kullanımından da kurtulacağınız için karmaşık kullanım yada büyük dosya boyutlarıyla uğraşmamış olacaksınız.
CSS Kodlarını Hazırlama
Zoom işlemi için CSS’de iki adet stil tanımlaması yapmak gerekmektedir. Bunlar .zoom ve .transition tanımlamalarıdır. Yakınlaştırma işlemi için .zoom kullanılırken, mouse ile üzerine gelindiğinde yapılacak olan işlemler de .transition tanımlaması üzerinden yapılacaktır.
img.zoom {
width: 350px;
height: 200px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
}
.transition {
-webkit-transform: scale(1.8);
-moz-transform: scale(1.8);
-o-transform: scale(1.8);
transform: scale(1.8);
}
Yukarıda yer alan kodlarla birlikte yakınlaştırma ve yakınlaştırma işlemi sırasında gerçekleşecek işlemin süre değerini tanımlamış olduk.
JQUERY Kodlarını Hazırlama
jQuery kütüphanesi kullanabilmek için ilk olarak kütüphaneyi dahil etmek gerekmektedir.
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
Yukarıdaki script etiketli kodu sayfaya ekledikten sonra jQuery kodlarını yazabiliriz.
<script>
$(document).ready(function(){
$('.zoom').hover(function() {
$(this).addClass('transition');
}, function() {
$(this).removeClass('transition');
});
});
</script>
Bu eklemiş olduğumuz kodla birlikte, .zoom class değerinin üzerine mouse ile gelindiğinde, üzerine gelinen değer için .transition özelliği eklenecektir. Mouse etiketin üzerinden çekildiğindeyse bu tanımlanan class değeri silinecektir.
HTML Kodlarını Hazırlama
İşlemi tamamlamak içinde bir görsel etiketi hazırlamak gerekiyor. Bu görsel etiketine .zoom tanımlaması yapmak gerekecektir.
<img src="ibrahimcevruk.jpg" class="zoom"/>
Bu tanımlamayla birlikte artık görselin üzerine mouse ile gelindiğinde zoom yapılan, mouse çekildiğinde ise eski haline dönen bir uygulama hazırlanmış olacaktır.
