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

اریک بیدلمن

صفحه اصلی توییتر GitHub

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

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

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

نکته: این روش روی شیء document است و نه بوم. آرگومان دوم همان نامی است که در -webkit-canvas() استفاده شده است.

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

توجه: تنها یک بوم CSS برای یک شناسه جهانی معین در هر سند وجود دارد. هنگامی که زمینه طراحی را به دست می آورید، اندازه را نیز مشخص می کنید. تا زمانی که بارها و بارها همان اندازه را درخواست کنید، بوم پاک نمی شود. تعیین یک اندازه جدید معادل نوع رفتاری است که در صورت تغییر اندازه عنصر <canvas> انتظار دارید، و بنابراین بافر بوم پاک خواهد شد.

توجه: تمام اشیایی که یک بوم CSS به همین نام را مشاهده می کنند، آن بوم را به اشتراک می گذارند. این بدان معنی است که (مشابه نحوه عملکرد GIF های متحرک)، می توانید انیمیشن ها را انجام دهید و آنها را به صورت قفل روی همه مشتریان بوم انجام دهید. تغییرات طراحی به طور خودکار به همه مشتریان منتشر می شود.

تصاوير متحرك

همانطور که در نسخه نمایشی مشاهده می‌شود، می‌توانیم از 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 وجود دارد. به همین دلیل است که سایر مرورگرها از ویژگی مذکور استفاده نکرده اند.