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

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

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

1. از CSS sprites برای به روز رسانی 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 فریم در ثانیه غیرقابل قبول است.

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

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

ابتدا، به جای تعیین یک URL برای پشت:

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

از -webkit-canvas() استفاده کنید و یک شناسه رشته را به یک بافت بوم ارجاع دهید:

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

در مرحله بعد، باید زمینه 2 بعدی را با یک نسخه خاص از .getContext() ایجاد کنیم:

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

اطلاعات بیشتر از Dave Hyatt:

تصاوير متحرك

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

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

کانال پایدار فعلی کروم (نسخه 23) دارای crbug.com/161699 است که از به‌روزرسانی صحیح پس‌زمینه توسط یک انیمیشن requestAnimationFrame() جلوگیری می‌کند. این مشکل در Chrome 25 (در حال حاضر Canary) برطرف شده است. نسخه ی نمایشی نیز باید در سافاری فعلی به خوبی کار کند.

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

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

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

یک ثانیه صبر کن آیا این بدان معنی است که ما می توانیم یک پس زمینه CSS را با استفاده از webgl تقویت کنیم؟ البته این کار را می کند! WebGL صرفا یک زمینه سه بعدی برای بوم است. فقط به جای "2d"، "experimental-webgl" را جایگزین کنید و voila کنید.

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

در اینجا یک اثبات مفهوم است که حاوی یک div با پس‌زمینه آن با استفاده از سایه‌زن‌های راس و قطعه است: DEMO

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

شایان ذکر است که موزیلا مدتی است که -moz-element() ( MDN ) را دارد. این بخشی از مشخصات CSS Image Values ​​and Replaced Content Module Level 4 است و به شما امکان می دهد یک تصویر ایجاد شده از HTML دلخواه ایجاد کنید: فیلم ها، بوم، محتوای DOM، ... با این حال، نگرانی‌های امنیتی با دسترسی کامل به تصاویر فوری DOM وجود دارد. به همین دلیل است که سایر مرورگرها از ویژگی مذکور استفاده نکرده اند.