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

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

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

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

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

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

এতে দুটি সমস্যা আছে:

1. data: ইউআরএল চূড়ান্ত ছবির আকারে প্রায় ৩৩% অতিরিক্ত ওজন যোগ করে।
2. প্রচুর DOM টাচিং ( el.style )।

এই দুটি পদ্ধতিই অদক্ষ: যা সর্বদা সাবলীল একটি ৬০এফপিএস ওয়েব অ্যাপের জন্য অগ্রহণযোগ্য।

পটভূমি হিসেবে 2d ক্যানভাস ব্যবহার করা

দেখা যাচ্ছে, ওয়েবকিটে বহু বছর ধরেই একটি নন-স্ট্যান্ডার্ড এপিআই রয়েছে যা ব্যাকগ্রাউন্ডের উৎস হিসেবে ক্যানভাস ব্যবহার করতে পারে। তবে দুঃখের বিষয় হলো, এই ফিচারটির জন্য কোনো প্রকাশিত স্পেক নেই ।

প্রথমত, ব্যাকএন্ডের জন্য একটি 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 নিয়ে ঘাঁটাঘাঁটি করার কোনো প্রয়োজন হয় না।

ক্রোমে ডেমোটি অ্যানিমেটেড হচ্ছে না?

ক্রোমের বর্তমান স্টেবল চ্যানেলে (ভার্সন ২৩) crbug.com/161699 বাগটি রয়েছে, যার কারণে requestAnimationFrame() অ্যানিমেশনটি ব্যাকগ্রাউন্ড সঠিকভাবে আপডেট করতে পারে না। ক্রোম ২৫-এ (বর্তমানে ক্যানারি) এটি ঠিক করা হয়েছে। ডেমোটি বর্তমান সাফারিতেও ভালোভাবে কাজ করার কথা।

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

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

ব্যাকগ্রাউন্ড হিসেবে ওয়েবজিএল ব্যবহার করা

একটু দাঁড়ান। এর মানে কি আমরা WebGL ব্যবহার করে CSS ব্যাকগ্রাউন্ড তৈরি করতে পারব? অবশ্যই পারবে! WebGL হলো ক্যানভাসের জন্য একটি ত্রিমাত্রিক (3D) প্রেক্ষাপট মাত্র। শুধু "2d"-এর জায়গায় "experimental-webgl" বসিয়ে দিন, আর দেখুন কী হয়।

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

এখানে একটি প্রুফ অফ কনসেপ্ট দেওয়া হলো, যেখানে একটি div-এর ব্যাকগ্রাউন্ড ভার্টেক্স এবং ফ্র্যাগমেন্ট শেডার ব্যবহার করে আঁকা হয়েছে: ডেমো

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

উল্লেখ্য যে, মোজিলাতে বেশ কিছুদিন ধরেই -moz-element() ( MDN ) ফিচারটি রয়েছে। এটি CSS Image Values ​​and Replaced Content Module Level 4 স্পেকের একটি অংশ এবং এর মাধ্যমে আপনি যেকোনো HTML, যেমন—ভিডিও, ক্যানভাস, DOM কন্টেন্ট ইত্যাদি থেকে ছবি তৈরি করতে পারবেন। তবে, DOM-এর স্ন্যাপশট ছবিতে সম্পূর্ণ অ্যাক্সেস থাকার ক্ষেত্রে নিরাপত্তা সংক্রান্ত উদ্বেগ রয়েছে। মূলত এই কারণেই অন্যান্য ব্রাউজারগুলো এই ফিচারটি গ্রহণ করেনি।