ক্যানভাস-চালিত পটভূমি ছবি

এরিক বিডেলম্যান
টুইটার গিটহাব হোমপেজ

ব্যাকগ্রাউন্ড ইমেজকে প্রোগ্রাম্যাটিকভাবে অ্যানিমেটিং করা

মানুষ ব্যাকগ্রাউন্ড ইমেজ অ্যানিমেট করার দুটি প্রাথমিক উপায় আছে:

  1. JS-এ একটি background-position আপডেট করতে CSS sprites ব্যবহার করুন।
  2. .toDataURL() এর সাথে হ্যাক।

আপনার কাছে যদি সময়ের আগে ইমেজ থাকে তবে প্রথমটি দুর্দান্ত কাজ করে, তবে আপনার উত্সটি যদি একটি <canvas> দ্বারা প্রোগ্রাম্যাটিকভাবে তৈরি করা প্রয়োজন হয় তবে কী হবে? #1 এর সমাধান হল ক্যানভাসে .toDataURL() ব্যবহার করা এবং পটভূমিকে জেনারেট করা URL-এ সেট করা:

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

এর সাথে দুটি সমস্যা রয়েছে:

  1. data: ইউআরএলগুলি ফলস্বরূপ চিত্রটিতে একটি ~33% আকারের ওভারহেড যোগ করে।
  2. এক টন DOM টাচিং ( el.style )।

এই উভয় পদ্ধতিই অকার্যকর: একটি সর্বদা-সিল্কি-মসৃণ 60fps ওয়েব অ্যাপের জন্য অগ্রহণযোগ্য।

ব্যাকগ্রাউন্ড হিসাবে 2d ক্যানভাস ব্যবহার করা

ব্যাকগ্রাউন্ড ডেমো হিসেবে ক্যানভাস
ডেমো

দেখা যাচ্ছে, একটি নন-স্ট্যান্ডার্ড API রয়েছে যা ওয়েবকিট-এ বছরের পর বছর ধরে রয়েছে যা ক্যানভাসকে একটি পটভূমির উত্স হিসাবে নিতে পারে। দুর্ভাগ্যক্রমে, এই বৈশিষ্ট্যটির জন্য কোন প্রকাশিত বৈশিষ্ট্য নেই ।

প্রথমে, পিছনের জন্য একটি URL নির্দিষ্ট করার পরিবর্তে:

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

একটি ক্যানভাস প্রসঙ্গে একটি স্ট্রিং শনাক্তকারী উল্লেখ করে -webkit-canvas() ব্যবহার করুন:

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

এর পরে, আমাদের .getContext() এর একটি বিশেষ সংস্করণ সহ 2d প্রসঙ্গ তৈরি করতে হবে :

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

ডেভ হায়াত থেকে আরও তথ্য :

অ্যানিমেশন

ডেমোতে দেখা যায়, আমরা একটি অ্যানিমেশন চালানোর জন্য requestAnimationFrame() পুনরায় ব্যবহার করতে পারি। এটি দুর্দান্ত, কারণ জিনিসগুলি একবার সংযুক্ত হয়ে গেলে, CSS এবং ক্যানভাস উপাদানের মধ্যে সংযোগ সংরক্ষিত থাকে । DOM এর সাথে বেহাল করার দরকার নেই।

ডেমো ক্রোমে অ্যানিমেটেড নয়?

ক্রোমের বর্তমান স্থিতিশীল চ্যানেলে (সংস্করণ 23) রয়েছে crbug.com/161699 , যা একটি requestAnimationFrame() অ্যানিমেশনকে সঠিকভাবে পটভূমি আপডেট করতে বাধা দেয়। এটি Chrome 25 (বর্তমানে ক্যানারি) এ ঠিক করা হয়েছে। ডেমোটি বর্তমান সাফারিতেও ভাল কাজ করা উচিত।

কর্মক্ষমতা সুবিধা

আমরা এখানে ক্যানভাসের কথা বলছি। হার্ডওয়্যার অ্যাক্সিলারেটেড অ্যানিমেশনগুলি এখন পুরোপুরি চালু রয়েছে (অন্তত ব্রাউজারগুলির জন্য এই বৈশিষ্ট্যটি কাজ করে)। এবং শুধু পুনরাবৃত্ত করার জন্য, JS থেকে DOM কে শ্লীলতাহানি করার দরকার নেই ।

একটি পটভূমি হিসাবে webgl ব্যবহার করে

একটু অপেক্ষা কর. এর মানে কি আমরা webgl ব্যবহার করে একটি CSS ব্যাকগ্রাউন্ড পাওয়ার করতে পারি? অবশ্যই এটা করে! WebGL ক্যানভাসের জন্য একটি 3d প্রসঙ্গ মাত্র। শুধু "2d" এর পরিবর্তে "experimental-webgl" এ অদলবদল করুন, এবং voila.

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

এখানে ধারণার একটি প্রমাণ রয়েছে যাতে ভার্টেক্স এবং ফ্র্যাগমেন্ট শেডার ব্যবহার করে আঁকা ব্যাকগ্রাউন্ড সহ একটি ডিভ রয়েছে: ডেমো

অন্যান্য পন্থা

এটা লক্ষণীয় যে মোজিলা-এ বেশ কিছুদিন ধরে -moz-element() ( MDN ) আছে। এটি CSS চিত্র মান এবং প্রতিস্থাপিত বিষয়বস্তু মডিউল লেভেল 4 স্পেকের অংশ এবং আপনাকে নির্বিচারে HTML থেকে তৈরি একটি চিত্র তৈরি করতে দেয়: ভিডিও, ক্যানভাস, DOM সামগ্রী,...আপনি এটির নাম দিন। যাইহোক, DOM-এর স্ন্যাপশট চিত্রগুলিতে সম্পূর্ণ অ্যাক্সেস থাকার সাথে নিরাপত্তার উদ্বেগ রয়েছে। এই কারণেই অন্যান্য ব্রাউজারগুলি এই বৈশিষ্ট্যটি গ্রহণ করেনি।