Hoverizr - عرض متعمق للمكوِّن الإضافي jQuery

نشرت: 2015-10-19

كمصمم ويب ، من وقت لآخر ، قد تحتاج إلى جعل الصورة ذات التدرج الرمادي تتلاشى في اللون عند تمرير الماوس فوقها. لذا فإن الحل النموذجي هو جعل كل صورة غير مشبعة لتحقيق تأثير التدرج الرمادي في Photoshop. بعد ذلك ، سيتعين عليك إضافة بعض divs وعلامات الصور الإضافية إلى الترميز ثم إضافة بعض سحر jQuery لتلاشي الصور للداخل والخارج. أو ، كان من الممكن دمج صورتين في صورة واحدة أكبر مع ضعف الارتفاع واللعب مع وضع الخلفية في ملفات CSS و Javascript.

دعنا نلقي نظرة على إيجابيات وسلبيات كل من هذين الحلين:

الايجابيات:

إذا كنت تستخدم صورة متحركة (كلتا الصورتين في ملف واحد) ، فسيكون لديك طلب HTTP أقل لكل صورة.

سلبيات:

يجب عليك معالجة كل صورة على حدة ، مما يعني أن العميل قد لا يكون قادرًا على تحديث الصور بهذا التأثير ديناميكيًا وهي عملية تستغرق وقتًا طويلاً.
إذا كنت تستخدم صورتين ، فسيكون لديك العديد من طلبات HTTP. في كلتا الحالتين ، إذا كانت الصور كبيرة ، يصبح الموقع بطيئًا بشكل ملحوظ.
تحتاج إلى كتابة كود jQuery لتأثيرات التمرير والتلاشي.

اضطررت إلى القيام بذلك في كل مرة أزعجني حقًا ، لذلك بحثت عن طريقة للقيام بذلك ديناميكيًا لكل صورة ، دون الحاجة إلى فقدان الترميز الدلالي والاضطرار إلى معالجة كل صورة.

أدخل عنصر لوحة الرسم. مع إدخال HTML5 ، أصبح عنصر Canvas أكثر وأكثر بروزًا في المجتمع. سيكون معظمكم قد سمع بالفعل بما تفعله اللوحة ، لذلك لن أدخلها هنا. ما كنت أحتاجه من القماش ، هو إمكانيات التلاعب بالصور. يمكنك استيراد صورة داخل اللوحة القماشية الخاصة بك ومعالجة قيمة كل بكسل.

كان هذا إلى حد كبير ما أحتاجه لتطوير البرنامج المساعد Hoverizr الخاص بي. مكوِّن jQuery الإضافي الذي يضيف تأثيرًا ديناميكيًا (تدرج الرمادي أو التمويه أو انعكاس اللون) إلى الصور المستهدفة ويتضمن تأثير fade out / ساري المفعول عند تمرير الماوس. وباتباع اتجاهات تصميم الويب ، فإنها تستجيب بشكل كامل.

هذا ما سنحققه من خلال تلاشي جيد للنسخة التي تم التلاعب بها في الأعلى:

يمكنك مشاهدة مثال حي مع عروض توضيحية للتأثيرات الأخرى لـ Hoverizr هنا.

الآن دعنا نتعمق.

Hoverizr

ينقسم Hoverizr إلى ثلاثة أجزاء.

تهيئة وإنشاء العناصر المطلوبة.
قم بإنشاء عنصر لوحة الرسم وإضافة التأثير.
أضف تأثير التحويم للداخل / الخارج لعناصر الصورة المستهدفة.

يأخذ 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" />')؛
$ (this) .parent ('. hoverizr-container'). css ({'position': 'النسبي'})؛
$ (this) .parent ('. hoverizr-container'). append ('<canvas class = "canv"> </canvas>')؛
$ (this) .next ('. canv'). css ({'position': 'absolute'، 'top': '0'، 'left': '0'، 'z-index': 10})؛

يشير $(this) إلى كل صورة مستهدفة برمزنا في التهيئة. نقوم بإنشاء div الذي يلف عنصر الصورة الهدف ، وقمنا بتعيين موضعه على نسبة إلى الصورة والقماش فوق بعضهما البعض. ثم قمنا بإنشاء عنصر قماش أسفل عنصر الصورة وأضفنا أخيرًا بعض التصميم لوضع اللوحة القماشية أعلى الصورة تمامًا.

بالطبع ، تختلف بعض الأجزاء في كود الإضافة.

الجزء 2. قم بإنشاء عنصر قماش الرسم وإضافة التأثير

إلى الجزء الثاني ، حيث سنقوم بتهيئة اللوحة القماشية وتنفيذ معالجة الصورة. لأغراض هذا البرنامج التعليمي ، سأشرح فقط تأثير التدرج الرمادي.

أولاً ، نحصل على العرض والارتفاع لمتغيرين لاستخدامهما في تهيئة اللوحة القماشية. مرة أخرى ، يشير $(this) إلى كل صورة يستهدفها المكون الإضافي.

 var width = $ (this) .width () ؛
var height = $ (this) .height () ؛

لنقم بإنشاء قماش لدينا:

 $ (هذا) .next ('. canv'). attr ({"العرض": العرض ، "الارتفاع": الارتفاع})؛
var canvas = $ (this) .next ('. canv'). get (0) ؛
سياق var = canvas.getContext ("2d") ؛
var image = $ (this) .get (0) ؛
Context.drawImage (صورة ، 0 ، 0) ؛

لذلك قمنا بتعيين عرض وارتفاع اللوحة ، نحصل على العنصر إلى المتغير ، ونحصل على السياق وأخيرًا نضيف صورتنا داخل السياق.

الآن لسحر التلاعب بالصورة!

 يحاول {
      يحاول { 
	var imgd = Context.getImageData (0، 0، width، height)  
      } catch (e) { 
netscape.security.PrivilegeManager.enablePrivilege ("UniversalBrowserRead") ؛
	var imgd = Context.getImageData (0، 0، width، height) 
      } 						 
} catch (e) {
رمي خطأ جديد ("غير قادر على الوصول إلى بيانات الصورة:" + هـ)
} 
						
var pix = imgd.data ؛

هذا الجزء من المحاولة والقبض بالكامل هو تمكين الامتيازات لبعض المتصفحات التي لديها إجراءات أمان إضافية (لا شيء مهم بالطبع). لدينا متغير imgd جديد لتخزين بيانات الصورة ثم نحفظها داخل متغير pix كمصفوفة.

الآن تأثير التدرج الرمادي:

 لـ (var i = 0، n = pix.length؛ i <n؛ i + = 4) {
	var grayscale = pix [i] * .3 + pix [i + 1] * .59 + pix [i + 2] * .11؛ 
	بكسل [i] = تدرج الرمادي ؛ // أحمر
	بكسل [i + 1] = تدرج الرمادي ؛ // لون أخضر
	بكسل [i + 2] = تدرج الرمادي ؛ // أزرق
	// i + 3 هي alpha (العنصر الرابع)
}
Context.putImageData (imgd، 0، 0) ؛

لدينا نمط متكرر هنا. تمثل كل أربع قيم pix البكسل قيمة حمراء وخضراء وزرقاء وألفا للبكسل. من الواضح أننا لا نريد تغيير ألفا لذلك سنتركه خارجًا. بدلاً من مجرد الحصول على القيمة المتوسطة لقنوات الألوان الثلاثة ، أستخدم بدلاً من ذلك صيغة لطيفة حصلت عليها من برنامج تعليمي لطيف ، HTML5 Canvas Image Effects: Black & White. أخيرًا ، أعدنا بيانات الصورة الجديدة إلى قماشنا.

الجزء 3. أضف تأثير Hover fade in / out لعناصر الصورة المستهدفة

هذا هو الجزء الأخير وربما الجزء الأسهل. جعل اللوحة القماشية تتلاشى لإظهار الصورة الأصلية تحتها عندما يحوم الماوس فوقها.

 this.parent ('. hoverizr-container'). hover (function () {
	$ (هذا) .children ('. canv'). stop (صحيح ، صحيح) .fadeOut ("سريع") ؛
	}،وظيفة() {
	$ (هذا) .children ('. canv'). stop (صحيح ، صحيح) .fadeIn ("بطيء") ؛
}) ؛

مرة أخرى ، هذا يمثل عنصر الصورة الهدف. وظيفة التمرير تشرح نفسها بنفسها إلى حد كبير. كل ما نقوم به هو استهداف اللوحة ، وإيقاف أي رسوم متحركة في قائمة الانتظار وإخراجها. يتم ضبط السرعة على "سريع" ولكن يمكن ضبطها على "بطيئة" أو على قيمة مرقمة بالمللي ثانية. عند الانتهاء من التمرير ، تحدث الوظيفة الثانية ، حيث يتلاشى قماش الرسم مرة أخرى.

مشكلة معروفة

قد يظهر مقياس أمان للمتصفحات إذا حاولت استخدام صور من مجال آخر. لسوء الحظ ، لا يوجد شيء يمكننا القيام به في الوقت الحالي. يجب استضافة الصور على نفس المجال مثل صفحتك.

Hoverizr مقابل هذا البرنامج التعليمي

Hoverizr هو مكون إضافي يحتوي بالفعل على كل ما تحتاجه لتحقيق هذا التأثير جنبًا إلى جنب مع تأثيرات التمويه وانعكاس اللون. يحتوي على الكثير من خيارات التخصيص المضمنة مثل إعداد العرض والارتفاع وسرعة التلاشي داخل وخارج الإعداد والعديد من الخيارات الأخرى. كان الغرض من هذا البرنامج التعليمي هو إظهار كيفية عمل بعض الأجزاء الرائعة من Hoverizr. لن يعمل الكود كما هو لأنه جزء من المكون الإضافي - مقسم إلى الأساسيات -.

إذا كنت مهتمًا باستخدام Hoverizr أو تحسينه أو إعطائي أي اقتراحات ، فلا تتردد في التحقق من ذلك هنا: Hoverizr jQuery Plugin.