Hoverizr – jQuery eklentisinin derinlemesine görünümü

Yayınlanan: 2015-10-19

Bir web tasarımcısı olarak, zaman zaman gri tonlamalı bir görüntünün fareyle üzerine gelindiğinde rengi soldurmanız gerekebilir. Bu nedenle tipik çözüm, Photoshop'ta gri tonlama efektini elde etmek için her görüntünün doygunluğunu azaltmak olacaktır. Ardından, işaretlemeye birkaç ekstra div ve görüntü etiketi eklemeniz ve ardından görüntüleri soldurmak için biraz jQuery büyüsü eklemeniz gerekir. Veya iki görüntüyü iki kat yüksekliğe sahip daha büyük bir görüntüde birleştirebilir ve CSS ve Javascript dosyalarında arka plan konumlandırmasıyla oynayabilirsiniz.

Bu iki çözümün her birinin artılarına ve eksilerine bir göz atalım:

Artıları:

  • Bir görüntü hareketli grafiği kullanıyorsanız (her iki görüntü de tek dosyada), her görüntü için bir HTTP isteğiniz daha az olur.

Eksileri:

  • Her görüntüyü ayrı ayrı işlemeniz gerekir, bu da istemcinin bu efektle görüntüleri dinamik olarak güncelleyemeyeceği ve zaman alıcı bir süreç olduğu anlamına gelir.
  • İki resim kullanırsanız, birçok HTTP isteğiniz olacaktır. Her iki durumda da, resimler büyükse site önemli ölçüde yavaşlar.
  • Fareyle üzerine gelme ve solma efektleri için jQuery kodunu yazmanız gerekir.

Bunu her seferinde yapmak zorunda kalmak beni gerçekten şaşırttı, bu yüzden anlamsal işaretlemeyi kaybetmeye ve her bir görüntüyü işlemeye gerek kalmadan bunu her görüntü için dinamik olarak yapmak için bir yöntem aradım.

Tuval öğesini girin. HTML5'in tanıtılmasıyla birlikte, tuval öğesi toplulukta giderek daha belirgin hale geldi. Çoğunuz tuvalin ne yaptığını duymuşsunuzdur, o yüzden burada buna girmeyeceğim. Tuvalden ihtiyacım olan şey, görüntü işleme yetenekleriydi. Tuvalinizin içindeki bir görüntüyü içe aktarabilir ve her pikselin değerini değiştirebilirsiniz.

Hoverizr Eklentimi geliştirmek için ihtiyacım olan şey buydu. Hedeflenen görüntülere dinamik olarak bir efekt (gri tonlamalı, bulanıklık veya renk dönüşümü) ekleyen ve fareyle üzerine gelindiğinde bir solma/içeri girme efekti içeren bir jQuery eklentisi. Ve web tasarım trendlerini takip ederek tamamen duyarlıdır.

Üstte manipüle edilmiş versiyonun güzel bir şekilde soldurulmasıyla elde edeceğimiz şey budur:

Hoverizr'in diğer etkilerinin demoları ile birlikte canlı bir örneğini buradan izleyebilirsiniz.

Şimdi dalalım.

Hoverizr

Hoverizr üç kısma ayrılır.

  1. Gerekli öğeleri başlatın ve oluşturun.
  2. Tuval öğesini oluşturun ve efekti ekleyin.
  3. Hedeflenen görüntü öğeleri için vurgulu solma/uzaklaşma efektini ekleyin.

Hoverizr, bunun gibi basit bir işaretleme alır…

 <img class="classname" src="image-file" />

…ve bunun gibi bir çıktı verir…

 <div class="hoverizr-konteyner">
	<img class="classname" src="image-file" />
	<canvas class=".canv"></canvas>
</div>

Bölüm 1. Gerekli Öğeleri Başlatın ve Oluşturun

Bu işaretlemeyi elde etmek ve tuval, resim ve div kapsayıcısına temel stiller eklemek için, hedeflenen tüm görüntüleri etkilemek için aşağıdaki jQuery'yi bir .each() işlevi içinde kullandım:

 $(this).wrap('<div class="hoverizr-container" />');
$(bu).parent('.hoverizr-container').css({'position':'relative'});
$(this).parent('.hoverizr-container').append('<canvas class="canv"></canvas>');
$(this).next('.canv').css({'position':'absolute','top':'0','left':'0','z-index':10});

$(this) , başlatmada kodumuzla hedeflenen resimlerin her birini ifade eder. Hedef görüntü öğesini saran bir div oluşturuyoruz, görüntü ve tuvalin üst üste gelmesi için konumunu göreli olarak ayarladık. Ardından, görüntü öğesinin altında tuval öğesini oluştururuz ve son olarak tuvali tam olarak görüntünün üstüne yerleştirmek için bazı stiller ekledik.

Elbette, eklentinin kodunda bazı kısımlar farklıdır.

Bölüm 2. Kanvas Öğesini oluşturun ve Efekti ekleyin

Tuvali başlatacağımız ve görüntü işlemeyi gerçekleştireceğimiz ikinci bölüme geçiyoruz. Bu eğitimin amaçları için yalnızca gri tonlama etkisini açıklayacağım.

İlk olarak, tuval başlatmada kullanmak için iki değişkenin genişliğini ve yüksekliğini alırız. Yine $(this) , eklentinin hedeflediği görüntülerin her birini ifade eder.

 var genişlik = $(bu).width();
var yükseklik = $(bu).yükseklik();

Tuvalimizi oluşturalım:

 $(bu).next('.canv').attr({"genişlik": genişlik ,"yükseklik":yükseklik});
var tuval = $(this).next('.canv').get(0);
var bağlam = canvas.getContext("2d");
var image = $(this).get(0);
bağlam.drawImage(image, 0, 0);

Böylece tuvalin genişliğini ve yüksekliğini ayarlıyoruz, elemanı değişkene getiriyoruz, bağlamı alıyoruz ve son olarak görüntüümüzü bağlamın içine ekliyoruz.

Şimdi görüntü işleme büyüsü için!

 denemek {
      denemek { 
	var imgd = context.getImageData(0, 0, genişlik, yükseklik)  
      } yakalama (e) { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	var imgd = context.getImageData(0, 0, genişlik, yükseklik) 
      } 						 
} yakalama (e) {
yeni Hata atmak ("görüntü verilerine erişilemiyor: " + e)
} 
						
var pix = imgd.data;

Tüm bu dene ve yakala kısmı, ekstra güvenlik önlemleri olan (elbette kritik bir şey değil) bazı tarayıcılara ayrıcalıklar sağlamak içindir. Daha sonra bir dizi olarak pix değişkeninin içine kaydettiğimiz görüntü verilerini depolamak için yeni bir imgd değişkenimiz var.

Şimdi gri tonlama efekti:

 for (var i = 0, n = pix.length; i < n; i += 4) {
	var gri tonlamalı = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11; 
	pix[i ] = gri tonlamalı; // kırmızı
	pix[i+1] = gri tonlamalı; // Yeşil
	pix[i+2] = gri tonlamalı; // Mavi
	// i+3 alfadır (dördüncü öğe)
}
context.putImageData(imgd, 0, 0);

Burada tekrar eden bir modelimiz var. pix dizisinin her dört değeri, bir pikselin kırmızı, yeşil, mavi ve alfa değerini temsil eder. Açıkçası alfayı değiştirmek istemiyoruz, bu yüzden onu dışarıda bırakacağız. Üç renk kanalının ortalama değerini almak yerine, bunun yerine güzel bir eğitimden aldığım güzel bir formül kullanıyorum, HTML5 Kanvas Görüntü Efektleri: Siyah Beyaz. Sonunda yeni görüntü verilerini tuvalimize geri koyuyoruz.

Bölüm 3. Hedeflenen Görüntü Öğeleri için Hover solma içeri/uzaklaştırma Efektini ekleyin

Bu son ve muhtemelen en kolay kısımdır. Fare üzerine gelindiğinde, altındaki orijinal görüntüyü ortaya çıkarmak için tuvali karartmak.

 this.parent('.hoverizr-container').hover(function() {
	$(this).children('.canv').stop(true,true).fadeOut("hızlı");
	},işlev() {
	$(this).children('.canv').stop(true,true).fadeIn("yavaş");
});

Yine bu, hedef görüntü öğesi anlamına gelir. Hover işlevi hemen hemen açıklayıcıdır. Tek yaptığımız tuvali hedeflemek, sıradaki animasyonları durdurmak ve onu kapatmak. Hız "hızlı" olarak ayarlanmıştır ancak "yavaş" olarak veya milisaniye cinsinden numaralandırılmış bir değer olarak ayarlanabilir. Fareyle üzerine gelme bittiğinde, tuvali tekrar soldurarak ikinci işlev gerçekleşir.

Bilinen Sorun

Başka bir etki alanından görüntüleri kullanmaya çalışırsanız, tarayıcıların bir güvenlik önlemi gelebilir. Maalesef şu anda yapabileceğimiz bir şey yok. Resimlerin sayfanızla aynı etki alanında barındırılması gerekir.

Hoverizr ve bu Eğitim

Hoverizr, bulanıklık ve renk tersine çevirme efektleriyle birlikte bu efekti elde etmek için ihtiyacınız olan her şeye zaten sahip bir eklentidir. Genişlik ve yükseklik ayarı, solma giriş ve çıkış ayarının hızı ve diğerleri gibi birçok özelleştirme seçeneğine sahiptir. Bu eğitimin amacı sadece Hoverizr'in bazı güzel kısımlarının nasıl çalıştığını göstermekti. Kod, eklentinin bir parçası olduğu gibi çalışmayacak -temellere indirgendi -.

Hoverizr'ı kullanmak, geliştirmek veya bana herhangi bir öneride bulunmakla ilgileniyorsanız, buradan kontrol etmekten çekinmeyin: Hoverizr jQuery Plugin.