صور خلفية مستندة إلى لوحة الرسم

إضافة صور خلفية متحركة آليًا

هناك طريقتان أساسيتان يستخدمهما المستخدمون لإضافة الحركة إلى صور الخلفية:

  1. استخدِم صورًا مصغّرة في CSS لتعديل background-position في JS .
  2. نصائح مع .toDataURL()

يُعدّ الخيار الأول مثاليًا إذا كانت لديك الصورة مسبقًا، ولكن ماذا لو كان عليك إنشاء المصدر آليًا، مثلاً باستخدام <canvas>؟ يتمثل الحلّ للمشكلة رقم 1 في استخدام .toDataURL() على اللوحة وضبط الخلفية على عنوان URL الذي تم إنشاؤه:

while(1) {
    var url = canvas.toDataURL('image/jpeg');
    el.style.background = 'url(' + url + ')';
}

هناك مشكلتان في ذلك:

  1. data: تضيف عناوين URL حجمًا إضافيًا بنسبة% 33 تقريبًا إلى الصورة الناتجة.
  2. عدد كبير من عمليات الاطّلاع على نموذج DOM (el.style)

كلتا الطريقتَين غير فعّالتين: غير مقبولَين لتطبيق ويب يعرض المحتوى بسلاسة دائمة بمعدّل 60 لقطة في الثانية.

استخدام لوحة رسومات ثنائية الأبعاد كخلفية

عرض توضيحي للوحة كخلفية
الإصدار التجريبي

تبيّن أنّ هناك واجهة برمجة تطبيقات غير عادية كانت متوفّرة في WebKit لسنوات يمكنها استخدام اللوحة كخلفية. لا تتوفّر مواصفات منشورة لهذه الميزة.

أولاً، بدلاً من تحديد عنوان URL للرجوع:

.bg {
    background: url(bg.png) no-repeat 50% 50%;
}

استخدِم -webkit-canvas() للإشارة إلى معرّف سلسلة في سياق لوحة الرسم:

.canvas-bg {
    background: -webkit-canvas(animation) no-repeat 50% 50%;
}

بعد ذلك، نحتاج إلى إنشاء السياق ثنائي الأبعاد باستخدام إصدار خاص من .getContext():

var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);

مزيد من المعلومات من Dave Hyatt:

الصور المتحركة

كما هو موضّح في العرض التجريبي، يمكننا إعادة استخدام requestAnimationFrame() لتشغيل صورة متحركة. هذا أمر رائع، لأنّه بعد ربط العناصر، يتم الاحتفاظ بالارتباط بين CSS وعنصر اللوحة. ولا حاجة إلى تعديل نموذج DOM.

هل لا يظهر العرض التجريبي بالشكل المتحرك في Chrome؟

تتضمّن القناة الثابتة الحالية من Chrome (الإصدار 23) crbug.com/161699، ما يمنع صورة متحركة requestAnimationFrame() من تعديل الخلفية بشكل صحيح. تم إصلاح هذه المشكلة في الإصدار 25 من Chrome (الإصدار Canary حاليًا). من المفترض أن يعمل الإصدار التجريبي أيضًا بشكل جيد في متصفّح Safari الحالي.

مزايا الأداء

نتحدث هنا عن لوحة الصورة. أصبحت الرسومات المتحرّكة المستندة إلى الأجهزة متاحة بالكامل الآن (على الأقل في المتصفحات التي تعمل فيها هذه الميزة). للتذكير فقط، ما مِن حاجة إلى إزعاج DOM من JS.

استخدام WebGL كخلفية

هل يعني ذلك أنّه يمكننا تشغيل خلفية CSS باستخدام webgl؟ بالتأكيد. WebGL هو مجرد سياق ثلاثي الأبعاد للوحة. ما عليك سوى استبدال "2d" بـ "experimental-webgl"، وسيتم حلّ المشكلة.

var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);

في ما يلي مثال يوضّح الفكرة ويحتوي على div مع خلفيته مرسومة باستخدام وحدات تظليل رؤوس المقاطع والعناصر: العرض التجريبي

طرق أخرى

تجدر الإشارة إلى أنّ Mozilla قدّمت -moz-element() (MDN) منذ فترة طويلة. يشكّل ذلك جزءًا من مواصفات CSS Image Values and Replaced Content Module Level 4، ويسمح لك بإنشاء صورة تم إنشاؤها من محتوى HTML عشوائي: فيديوهات ولوحات فنية ومحتوى DOM وغير ذلك. ومع ذلك، هناك مخاوف تتعلق بالأمان في ما يتعلّق بالوصول الكامل إلى صور اللقطات لنموذج DOM. وهذا هو السبب الرئيسي لعدم اعتماد المتصفّحات الأخرى لهذه الميزة.