এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ওয়েব অ্যানিমেশন সম্পদ

Sam Thorogood

ওয়েব অ্যানিমেশন API জাভাস্ক্রিপ্ট থেকে অপরিহার্য অ্যানিমেশন বর্ণনা করার জন্য শক্তিশালী আদিম প্রদান করে - কিন্তু এর অর্থ কী? Google এর ডেমো এবং কোডল্যাব সহ আপনার কাছে উপলব্ধ সংস্থানগুলি সম্পর্কে সন্ধান করুন৷

পটভূমি

এর মূল অংশে, API Element.animate() পদ্ধতি প্রদান করে। আসুন একটি উদাহরণ দেখি, যা পটভূমির রঙ লাল থেকে সবুজে অ্যানিমেট করে-

var player = document.body.animate(
    [{'background': 'red'}, {'background': 'green'}], 1000);

এই পদ্ধতিটি সমস্ত আধুনিক ব্রাউজারে সমর্থিত, একটি দুর্দান্ত পলিফিল ফলব্যাক সহ (এর পরে আরও বেশি)। এই পদ্ধতির জন্য স্থানীয় সমর্থন - এবং এর প্লেয়ার অবজেক্ট - Chrome 39- এর অংশ হিসাবে ব্যাপকভাবে উপলব্ধ হয়ে উঠেছে। এটি অপেরাতেও স্থানীয়ভাবে উপলব্ধ , এবং ফায়ারফক্সের জন্য সক্রিয় বিকাশের অধীনে রয়েছে। এটি একটি শক্তিশালী আদিম যা আপনার টুলবক্সে একটি স্থান প্রাপ্য।

কোডল্যাব

ওয়েব অ্যানিমেশন API-এর জন্য ক্রমবর্ধমান সংখ্যক কোডল্যাব উপলব্ধ । এগুলি স্ব-গতির গাইড যা API-তে বিভিন্ন ধারণা প্রদর্শন করে। এই কোডল্যাবগুলির বেশিরভাগের মধ্যে, আপনি স্ট্যাটিক সামগ্রী নেবেন এবং অ্যানিমেশন প্রভাবগুলির সাথে এটিকে উন্নত করবেন।

এই কোডল্যাবগুলি এবং সম্পর্কিত লিঙ্কগুলি বা সংস্থানগুলি হল শুরু করার জন্য নিখুঁত সেরা জায়গা যদি আপনি ওয়েব অ্যানিমেশনগুলিতে আপনার জন্য উপলব্ধ নতুন আদিমগুলি বুঝতে চান৷ আপনি কী তৈরি করতে পারেন তার একটি ধারণার জন্য, এই অ্যান্ড্রয়েড-অনুপ্রাণিত প্রকাশ প্রভাবটি দেখুন-

আপনি যদি সবে শুরু করছেন, তাহলে আর তাকাবেন না!

ডেমো

আপনি যদি অনুপ্রেরণা খুঁজছেন, GitHub-এ হোস্ট করা উত্স সহ উপাদান-অনুপ্রাণিত ওয়েব অ্যানিমেশন ডেমোগুলি পরীক্ষা করতে ভুলবেন না। এগুলি বিভিন্ন ধরনের আশ্চর্যজনক প্রভাব প্রদর্শন করে এবং আপনি প্রতিটি ডেমোর সোর্স কোড ইনলাইনে দেখতে পারেন।

ডেমোগুলির মধ্যে একটি রঙিন স্পিনিং গ্যালাক্সি , ঘূর্ণায়মান পৃথিবী , এমনকি একটি সাধারণ পুরানো উপাদানের উপর বিভিন্ন ধরণের প্রভাব অন্তর্ভুক্ত রয়েছে।

পলিফিল

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

আপনি যদি দুঃসাহসিক বোধ করেন, আপনি ওয়েব-অ্যানিমেশন-পরবর্তী পলিফিল ব্যবহার করতে পারেন, এতে এমন বৈশিষ্ট্যগুলিও রয়েছে যা এখনও চূড়ান্ত করা হয়নি - যেমন কম্পোজযোগ্য GroupEffect এবং SequenceEffect কনস্ট্রাক্টর৷ দুটি পলিফিলের মধ্যে তুলনা করার জন্য, দয়া করে হোমপেজটি দেখুন ।

আপনার কোডে পলিফিল ব্যবহার করতে, আপনার কাছে কয়েকটি বিকল্প রয়েছে।

একটি CDN ব্যবহার করুন, যেমন cdnjs , jsDelivr , বা rawgit.com এর মাধ্যমে একটি নির্দিষ্ট রিলিজ লক্ষ্য করুন

NPM বা Bower এর মাধ্যমে ইনস্টল করুন

 $ npm install web-animations-js
 $ bower install web-animations-js
 ```

সব ক্ষেত্রে, আপনি অন্য কোনো কোডের আগে স্ক্রিপ্ট ট্যাগে পলিফিলটি অন্তর্ভুক্ত করতে পারেন-

<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
    document.body.animate([
    {'background': 'red'},
    {'background': 'green'}
    ], 1000);
</script>

অন্যান্য সম্পদ

আপনি যদি আরও প্রযুক্তিগত ভূমিকা পড়তে চান, তাহলে অনুগ্রহ করে W3C স্পেকটি দেখুন।

ড্যান উইলসন ওয়েব অ্যানিমেশনগুলিতে পোস্টের একটি দুর্দান্ত সেট লিখেছেন, নতুন CSS motion-path সম্পত্তির পাশাপাশি এটি কীভাবে ব্যবহার করবেন তা সহ। motion-path ব্যবহার করে কিছু নমুনার জন্য, এরিক উইলিগার্সের ডক দেখুন।

Sam Thorogood

পটভূমি

var player = document.body.animate(
    [{'background': 'red'}, {'background': 'green'}], 1000);

কোডল্যাব

আপনি যদি সবে শুরু করছেন, তাহলে আর তাকাবেন না!

ডেমো

পলিফিল

আপনার কোডে পলিফিল ব্যবহার করতে, আপনার কাছে কয়েকটি বিকল্প রয়েছে।

একটি CDN ব্যবহার করুন, যেমন cdnjs , jsDelivr , বা rawgit.com এর মাধ্যমে একটি নির্দিষ্ট রিলিজ লক্ষ্য করুন

NPM বা Bower এর মাধ্যমে ইনস্টল করুন

 $ npm install web-animations-js
 $ bower install web-animations-js
 ```

<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script>
<script>
    document.body.animate([
    {'background': 'red'},
    {'background': 'green'}
    ], 1000);
</script>