تصاویر پس زمینه بوم محور

متحرک‌سازی تصاویر پس‌زمینه به صورت برنامه‌نویسی‌شده

دو روش اصلی وجود دارد که افراد تصاویر پس زمینه را متحرک می کنند :

  1. از CSS sprites برای به‌روزرسانی background-position در JS استفاده کنید.
  2. هک با .toDataURL() .

اگر تصویر را از قبل داشته باشید، روش اول عالی عمل می‌کند، اما اگر منبع شما نیاز به تولید برنامه‌نویسی داشته باشد، مثلاً توسط یک <canvas> چه؟ راه حل شماره ۱ استفاده از .toDataURL() روی بوم و تنظیم پس‌زمینه روی URL تولید شده است:

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

دو مشکل در این مورد وجود دارد:

  1. data: URLها حدود ۳۳٪ سربار حجمی به تصویر حاصل اضافه می‌کنند.
  2. کلی چیزای مرتبط با DOM ( el.style ).

هر دوی این روش‌ها ناکارآمد هستند: برای یک برنامه وب همیشه روان با نرخ فریم ۶۰ فریم بر ثانیه غیرقابل قبول هستند.

استفاده از بوم نقاشی دوبعدی به عنوان پس‌زمینه

بوم نقاشی به عنوان نسخه نمایشی پس زمینه
نسخه آزمایشی

مشخص شد که یک API غیراستاندارد وجود دارد که WebKit سال‌هاست از آن استفاده می‌کند و می‌تواند از canvas به عنوان منبع پس‌زمینه استفاده کند. با این حال، متأسفانه هیچ مشخصات منتشر شده‌ای برای این ویژگی وجود ندارد .

اول، به جای مشخص کردن یک URL برای back:

.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);

اطلاعات بیشتر از دیو هایت:

انیمیشن‌ها

همانطور که در دمو مشاهده شد، می‌توانیم از requestAnimationFrame() برای اجرای یک انیمیشن استفاده مجدد کنیم. این عالی است، زیرا وقتی همه چیز به هم متصل شد، ارتباط بین CSS و عنصر canvas حفظ می‌شود . نیازی به دستکاری DOM نیست.

نسخه آزمایشی در کروم متحرک نیست؟

کانال پایدار فعلی کروم (نسخه ۲۳) دارای crbug.com/161699 است که مانع از به‌روزرسانی صحیح انیمیشن requestAnimationFrame() ‎ در پس‌زمینه می‌شود. این مشکل در کروم ۲۵ (در حال حاضر Canary) برطرف شده است. نسخه آزمایشی همچنین باید در سافاری فعلی به خوبی کار کند.

مزایای عملکرد

ما اینجا داریم در مورد canvas صحبت می‌کنیم. انیمیشن‌های شتاب‌دهنده سخت‌افزاری حالا کاملاً در حال اجرا هستند (حداقل برای مرورگرهایی که این ویژگی در آنها کار می‌کند). و فقط برای تکرار، نیازی به دستکاری DOM از JS نیست .

استفاده از webgl به عنوان پس زمینه

یه لحظه صبر کنید. آیا این به این معنی است که می‌توانیم با استفاده از webgl یک پس‌زمینه CSS ایجاد کنیم؟ البته که همینطور است! WebGL صرفاً یک زمینه سه‌بعدی برای canvas است. فقط کافی است به جای "2d" عبارت "experimental-webgl" را قرار دهید و تمام.

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

در اینجا اثبات مفهومی ارائه شده است که شامل یک div با پس‌زمینه ترسیم شده با استفاده از سایه‌زن‌های رأس و قطعه است: نسخه آزمایشی

رویکردهای دیگر

شایان ذکر است که موزیلا مدتی است که از -moz-element() ( MDN ) استفاده می‌کند. این بخشی از مشخصات سطح ۴ ماژول مقادیر تصویر و محتوای جایگزین‌شده در CSS است و به شما امکان می‌دهد تصویری تولید شده از HTML دلخواه ایجاد کنید: ویدیوها، بوم نقاشی، محتوای DOM و... هر چیزی که فکرش را بکنید. با این حال، نگرانی‌های امنیتی در مورد دسترسی کامل به تصاویر فوری DOM وجود دارد. به همین دلیل است که سایر مرورگرها این ویژگی را نپذیرفته‌اند.