Hoverizr – มุมมองเชิงลึกของปลั๊กอิน jQuery

เผยแพร่แล้ว: 2015-10-19

ในฐานะนักออกแบบเว็บไซต์ บางครั้ง คุณอาจต้องทำให้ภาพระดับสีเทาจางลงเป็นสีเมื่อวางเมาส์ไว้ ดังนั้น วิธีแก้ปัญหาทั่วไปก็คือการทำให้แต่ละภาพไม่อิ่มตัวเพื่อให้ได้เอฟเฟกต์โทนสีเทาใน Photoshop จากนั้น คุณจะต้องเพิ่ม div และแท็กรูปภาพเพิ่มเติมสองสามรายการในมาร์กอัป จากนั้นจึงเพิ่ม jQuery magic เพื่อทำให้รูปภาพจางลง หรือคุณอาจรวมภาพสองภาพเป็นภาพที่ใหญ่ขึ้นหนึ่งภาพโดยเพิ่มความสูงเป็นสองเท่าแล้วลองวางตำแหน่งพื้นหลังในไฟล์ CSS และ Javascript

มาดูข้อดีและข้อเสียของแต่ละวิธีแก้ปัญหาทั้งสองนี้:

ข้อดี:

  • หากคุณใช้รูปภาพสไปรต์ (ทั้งสองรูปภาพในไฟล์เดียว) แสดงว่าคุณมีคำขอ HTTP น้อยกว่าหนึ่งรายการสำหรับแต่ละรูปภาพ

จุดด้อย:

  • คุณต้องจัดการแต่ละรูปภาพแยกกัน ซึ่งหมายความว่าไคลเอนต์อาจไม่สามารถอัปเดตรูปภาพด้วยเอฟเฟกต์นั้นแบบไดนามิกและเป็นกระบวนการที่ใช้เวลานาน
  • หากคุณใช้สองภาพ คุณจะมีคำขอ HTTP จำนวนมาก ไม่ว่าจะด้วยวิธีใด หากรูปภาพมีขนาดใหญ่ ไซต์จะช้ามาก
  • คุณต้องเขียนโค้ด jQuery สำหรับเอฟเฟกต์โฮเวอร์และเฟด

ต้องทำอย่างนั้นทุกครั้งที่ทำให้ฉันผิดหวังจริงๆ ดังนั้นฉันจึงค้นหาวิธีการทำแบบไดนามิกสำหรับแต่ละภาพ โดยไม่จำเป็นต้องเสียมาร์กอัปความหมายและต้องประมวลผลแต่ละภาพ

ป้อนองค์ประกอบผ้าใบ ด้วยการเปิดตัว HTML5 องค์ประกอบผ้าใบมีความโดดเด่นมากขึ้นในชุมชน พวกคุณส่วนใหญ่คงเคยได้ยินมาบ้างแล้วว่าผ้าใบทำอะไร ฉันจะไม่พูดถึงมันที่นี่ สิ่งที่ฉันต้องการจากผืนผ้าใบคือความสามารถในการจัดการรูปภาพ คุณสามารถนำเข้ารูปภาพภายในผืนผ้าใบของคุณและจัดการค่าของแต่ละพิกเซลได้

นั่นคือสิ่งที่ฉันต้องการในการพัฒนาปลั๊กอิน Hoverizr ปลั๊กอิน jQuery ที่เพิ่มเอฟเฟกต์แบบไดนามิก (ระดับสีเทา เบลอ หรือการกลับสี) ให้กับรูปภาพเป้าหมายและรวมเอฟเฟกต์เฟด/ออกเมื่อวางเมาส์ไว้ และตามเทรนด์การออกแบบเว็บก็ตอบสนองได้เต็มที่

นี่คือสิ่งที่เราจะบรรลุได้ด้วยการค่อยๆ จางหายไปจากเวอร์ชันที่ปรับแต่งด้านบน:

คุณสามารถดูตัวอย่างสดพร้อมการสาธิตเอฟเฟกต์อื่นๆ ของ Hoverizr ได้ที่นี่

ตอนนี้เรามาดำน้ำกัน

Hoverizr

Hoverizr แบ่งออกเป็นสามส่วน

  1. เริ่มต้นและสร้างองค์ประกอบที่จำเป็น
  2. สร้างองค์ประกอบผ้าใบและเพิ่มเอฟเฟกต์
  3. เพิ่มเอฟเฟกต์โฮเวอร์เฟดเข้า/ออกสำหรับองค์ประกอบรูปภาพเป้าหมาย

Hoverizr ใช้มาร์กอัปง่ายๆ แบบนี้...

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

…และแสดงผลออกมาประมาณนี้…

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

ส่วนที่ 1 เริ่มต้นและสร้างองค์ประกอบที่จำเป็น

เพื่อให้บรรลุมาร์กอัปนี้และเพิ่มสไตล์ที่จำเป็นบนแคนวาส รูปภาพ และคอนเทนเนอร์ div ฉันใช้ jQuery ด้านล่างภายในฟังก์ชัน . .each() เพื่อส่งผลต่อรูปภาพเป้าหมายทั้งหมด:

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

$(this) หมายถึงแต่ละภาพที่กำหนดเป้าหมายด้วยรหัสของเราในการเริ่มต้น เราสร้าง div ที่ล้อมองค์ประกอบรูปภาพเป้าหมาย เราตั้งค่าตำแหน่งให้สัมพันธ์กันเพื่อให้รูปภาพและผืนผ้าใบวางทับกัน จากนั้น เราสร้างองค์ประกอบผ้าใบใต้องค์ประกอบรูปภาพ และสุดท้ายเพิ่มสไตล์บางอย่างเพื่อจัดตำแหน่งผ้าใบให้อยู่ด้านบนของรูปภาพ

แน่นอน ในโค้ดของปลั๊กอิน บางส่วนมีความแตกต่างกัน

ส่วนที่ 2 สร้างองค์ประกอบผ้าใบและเพิ่มเอฟเฟกต์

ในส่วนที่สอง เราจะเริ่มต้นผืนผ้าใบและดำเนินการปรับแต่งภาพ สำหรับจุดประสงค์ของบทช่วยสอนนี้ ฉันจะอธิบายเฉพาะเอฟเฟกต์โทนสีเทาเท่านั้น

ประการแรก เราได้ความกว้างและความสูงจากสองตัวแปรเพื่อใช้ในการเริ่มต้นผ้าใบ อีกครั้ง $(this) หมายถึงรูปภาพแต่ละภาพที่ปลั๊กอินกำหนดเป้าหมาย

 var width = $(นี้).width();
ความสูง var = $(นี้).height();

มาสร้างผืนผ้าใบของเรา:

 $(นี้).next('.canv').attr({"width": width ,"height": height});
var canvas = $(นี้).next('.canv').get(0);
var บริบท = canvas.getContext("2d");
var image = $(นี้).get(0);
Context.drawImage(รูปภาพ, 0, 0);

ดังนั้นเราจึงกำหนดความกว้างและความสูงของผืนผ้าใบ เราได้องค์ประกอบไปยังตัวแปร รับบริบท และเพิ่มรูปภาพของเราในบริบทในที่สุด

ตอนนี้สำหรับเวทย์มนตร์การจัดการภาพ!

 พยายาม {
      พยายาม { 
	var imgd = context.getImageData(0, 0, ความกว้าง, ความสูง)  
      } จับ (จ) { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	var imgd = context.getImageData(0, 0, ความกว้าง, ความสูง) 
      } 						 
} จับ (จ) {
โยนข้อผิดพลาดใหม่ ("ไม่สามารถเข้าถึงข้อมูลภาพ: " + e)
} 
						
var pix = imgd.data;

ส่วนที่พยายามและจับทั้งหมดนี้คือการเปิดใช้งานสิทธิ์สำหรับเบราว์เซอร์บางตัวที่มีมาตรการรักษาความปลอดภัยเพิ่มเติม (ไม่มีอะไรสำคัญแน่นอน) เรามีตัวแปร imgd ใหม่เพื่อเก็บข้อมูลรูปภาพซึ่งเราจะบันทึกภายในตัวแปร pix เป็นอาร์เรย์

ตอนนี้เอฟเฟกต์ระดับสีเทา:

 สำหรับ (var i = 0, n = pix.length; i < n; i += 4) {
	วาร์สีเทา = pix[i ] * .3 + pix[i+1] * .59 + pix[i+2] * .11; 
	pix[i ] = ระดับสีเทา; // สีแดง
	pix[i+1] = ระดับสีเทา; // เขียว
	pix[i+2] = ระดับสีเทา; // สีฟ้า
	// i+3 คืออัลฟ่า (องค์ประกอบที่สี่)
}
บริบท.putImageData(imgd, 0, 0);

เรามีรูปแบบการทำซ้ำที่นี่ ค่าสี่ค่าของอาร์เรย์ pix จะแสดงค่าสีแดง เขียว น้ำเงิน และอัลฟาของพิกเซล เห็นได้ชัดว่าเราไม่ต้องการเปลี่ยนอัลฟ่า ดังนั้นเราจะปล่อยมันไป แทนที่จะแค่หาค่าเฉลี่ยของช่องสีสามช่อง ฉันกลับใช้สูตรดีๆ ที่ได้จากบทช่วยสอนดีๆ อย่าง HTML5 Canvas Image Effects: Black & White ในที่สุด เราก็นำข้อมูลภาพใหม่กลับมาบนผืนผ้าใบของเรา

ส่วนที่ 3 เพิ่มเอฟเฟกต์โฮเวอร์เฟดเข้า/ออกสำหรับองค์ประกอบรูปภาพที่เป็นเป้าหมาย

นี่เป็นส่วนสุดท้ายและอาจเป็นส่วนที่ง่ายที่สุด ทำให้ผ้าใบจางลงเพื่อแสดงภาพต้นฉบับด้านล่างเมื่อวางเมาส์เหนือ

 this.parent ('.hoverizr-container').hover (ฟังก์ชัน () {
	$(this).children('.canv').stop(true,true).fadeOut("เร็ว");
	},การทำงาน() {
	$(this).children('.canv').stop(true,true).fadeIn("ช้า");
});

อีกครั้งนี้หมายถึงองค์ประกอบภาพเป้าหมาย ฟังก์ชันโฮเวอร์นั้นค่อนข้างอธิบายตนเองได้ชัดเจน ทั้งหมดที่เราทำคือกำหนดเป้าหมายแคนวาส หยุดแอนิเมชั่นที่อยู่ในคิวแล้วออกไป ความเร็วถูกตั้งค่าเป็น "เร็ว" แต่สามารถตั้งค่าเป็น "ช้า" หรือค่าตัวเลขเป็นมิลลิวินาทีได้ เมื่อวางเมาส์เหนือเสร็จแล้ว ฟังก์ชันที่สองจะเกิดขึ้น ผ้าใบให้จางลงอีกครั้ง

ปัญหาที่ทราบ

มาตรการรักษาความปลอดภัยของเบราว์เซอร์อาจเกิดขึ้นหากคุณพยายามใช้รูปภาพจากโดเมนอื่น ขออภัย เราไม่สามารถทำอะไรได้ในขณะนี้ รูปภาพต้องโฮสต์บนโดเมนเดียวกับเพจของคุณ

Hoverizr กับบทช่วยสอนนี้

Hoverizr เป็นปลั๊กอินที่มีทุกสิ่งที่คุณต้องการเพื่อให้ได้เอฟเฟกต์นี้พร้อมกับเอฟเฟกต์การเบลอและการกลับสี มีตัวเลือกการปรับแต่งมากมาย เช่น การตั้งค่าความกว้างและความสูง ความเร็วในการตั้งค่าเฟดเข้าและออก และอื่นๆ อีกมากมาย จุดประสงค์ของบทช่วยสอนนี้คือเพื่อแสดงให้เห็นว่าบางส่วนของ Hoverizr ทำงานได้ดีเพียงใด รหัสจะไม่ทำงานตามที่เป็นส่วนหนึ่งของปลั๊กอิน - แยกเป็นพื้นฐาน -

หากคุณสนใจที่จะใช้ Hoverizr ปรับปรุงหรือให้คำแนะนำใด ๆ แก่ฉัน โปรดลองดูที่นี่: ปลั๊กอิน Hoverizr jQuery