() translation by (you can also view the original English article)
ইন্টারনেটের ইতিহাসে এমন একটা সময় ছিলো, যখন ওয়েবসাইটে অ্যানিমেটেড জিআইএফ ফাইল ছাড়া কোনও ভিডিও ইফেক্ট যোগ করতে চাইলে ফ্ল্যাশ ব্যবহার করতে হতো। কিন্তু আজকাল ফ্ল্যাশ একেবারেই ব্যবহার হয় না এবং অন্যদিকে CSS3 এবং HTML5 দিয়ে ওয়েবের জন্য অসাধারণ সব অ্যানিমেশন ও ইফেক্টসমূহ তৈরি হচ্ছে।
আপনি যদি আপনার ওয়েবসাইট অথবা পরবর্তী প্রজেক্টে কিছু অসাধারণ CSS অ্যানিমেশন যোগ করতে চান, তাহলে এখানে কাজ শুরু করার জন্য কোড ক্যানিয়ন থেকে সেরা ২০ টি অ্যানিমেশনের তালিকা দেয়া হলো:
১। এইরো - CSS3 হোভার ইফেক্ট
এইরো - CSS3 হোভার ইফেক্ট দিয়ে ছায়াযুক্ত কাঁচের মত হোভার ইফেক্ট যোগ করুন।
এটা সম্পূর্ণ রেস্পন্সিভ এবং ব্যবহার করা সহজ, আপনি এটাতে আরও পাবেনঃ
- সহজেই রং এবং বৃত্ত থেকে চতুর্ভুজে রুপান্তর সুবিধা
- সব ব্রাউজারের সাথে কম্প্যাটিবল- এমনকি মাইক্রোসফট এজের সাথেও
- SASS কম্প্যাটিবল
- কাস্টমাইজেবল CzS
- এবং আরও অনেক কিছু!
এই রিলিজে ১০ টি ইফেক্ট আছে এবং আরও ইফেক্ট আসছে। আপনার ইমেজে হোভার ইফেক্ট যুক্ত করার জন্য এইরো - CSS3 হোভার ইফেক্ট একটি অসাধারণ CSS অ্যানিমেশন বাণ্ডেল।
২। মেগাহোভার মাউস ওভার ইফেক্ট
মেগাহোভার মাউস ওভার ইফেক্টে আছে একটি শক্তিশালী ব্যাচের CSS3 ইমেজ হোভার ইফেক্ট যা বুটস্ট্র্যাপ ৩ এর সাথে কম্প্যাটিবল।
এছাড়াও এতেঃ
- ফন্ট অসাম আইকন ব্যবহার করা হয়েছে
- সব ধরণের ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ
- সম্পূর্ণ রেস্পন্সিভ
- এবং আরও অনেক কিছু
মেগাহোভার মাউস ওভার ইফেক্ট দিয়ে একশয়ের মত সুন্দর সুন্দর হোভার ইফেক্ট তৈরি করা সম্ভব।
৩। অ্যনিমেশিয়া - CSS ইমেজ হোভার ইফেক্ট
সহযে ব্যবহারযোগ্য, সংক্ষিপ্ত লোডিং টাইম, এবং অনেক বেশী কাস্টমাইজেবল কোনও অ্যানিমেশন খুঁজছেন? অ্যনিমেশিয়া - CSS ইমেজ হোভার ইফেক্ট আপনার জন্য এর চেয়েও বেশি কিছু করবে।
এই CSS ব্যাচে আছেঃ
- ১১৫ টিরও বেশি কাস্টমাইজেবল হোভার ইফেক্ট
- সম্পূর্ণ রেস্পন্সিভ এবং সহজে ব্যবহারযোগ্য ফাইলসমূহ
- সম্পূর্ণ CSS3 এবং ফন্ট অসাম আইকন দিয়ে তৈরি
- এবং আরও অনেক কিছু
অ্যনিমেশিয়া - CSS ইমেজ হোভার ইফেক্ট আপনার বাটন স্টাইল, ওভারলে ইফেক্ট, ক্যাপশন এবং অন্যান্য CSS অ্যানিমেশনে ব্যবহার করতে পারেন।
৪। হোভার ইফেক্ট ফ্রেমওয়ার্ক
হোভার ইফেক্ট ফ্রেমওয়ার্ক হচ্ছে খুব হালকা পাতলা CSS অ্যানিমেশন সল্যুশন।
পরিচ্ছন্ন কোড, সম্পূর্ণ রেস্পন্সিভ, এবং:
- আইকোমুন আল্টিমেট ফন্ট
- ৪ শেইপ এবং ৫ টি রং
- ৫০+ অ্যানিমেশন
- এবং আরও অনেক কিছু
হোভার ইফেক্ট ফ্রেমওয়ার্কের কোড খুব পরিচ্ছন্ন, এবং এটাতে অসাধারণ CSS অ্যানিমেশন তৈরি করার সমস্ত উপাদানই পাবেন।
৫। কালেকশন অব প্রিলোডারস
কালেকশন অব প্রিলোডারস থাকলে হয়তোবা আপনার আর কোনও প্রিলোডারের প্রয়োজন হবে না।
এতে আপনি পাবেনঃ
- সহজে কাস্টোমাইজ করার জন্য বিস্তারিত বিবরণ।
- একটি সংক্ষিপ্ত ও সহজে ব্যবহারযোগ্য CSS3 অ্যানিমেশন সেট।
- ২৭ টি ইউনিক প্রিলোডার।
সম্পূর্ণ রেস্পন্সিভ এই কালেকশন অব প্রিলোডারসটি যে কারও CSS3 টুলবক্সের জন্য হতে পারে একটি অসাধারণ সংযোজন।
৬। CSS3 ইমেজ হোভার ইফেক্ট
আপনি যদি কখনও একটি ইমেজ হোভার ইফেক্টে CSS অ্যানিমেশন দেখেন, তাহলে সম্ভবত সবগুলো ছবিই দেখে থাকেন, তাই না?
না, একেবারেই নয়।
CSS3 ইমেজ হোভার ইফেক্টে আছে বেশ কিছু অসাধারণ ও ইউনিক ইফেক্ট।
এটাতে আছেঃ
- ২২ টি আলাদা আলাদা CSS3 ইমেজ হোভার ইফেক্ট।
- দেখতে অসাধারণ এবং রেস্পন্সিভ।
- পরিচ্ছন্ন CSS3 কোড।
- এবং আরও অনেক কিছু।
বুটস্ট্র্যাপ কম্প্যাটিবল CSS3 ইমেজ হোভার ইফেক্টটি এখনই চেক করে দেখুন।
৭। ইমেজ হোভার CSS লাইব্রেরী
ইমেজ হোভার CSS লাইব্রেরীটি হচ্ছে একটি স্কেলেবল, সংক্ষিপ্ত ইমেজ হোভার css অ্যানিমেশন লাইব্রেরী যা অবশ্যই দেখতে পারেন।
এটা হচ্ছে ৫৮ টি হোভার ইফেক্ট ক্লাসের একটি অসাধারণ সংগ্রহ যা মাত্র 25KB।
- যে কোন ধরণের হোভার কনটেন্টের সঙ্গে কাজ করতে সক্ষম।
- ইউনিক হোভার ইফেক্ট
- সহজে ব্যবহারযোগ্য
- এবং আরো অনেক কিছু।
ইমেজ হোভার CSS অ্যানিমেশন সেট ছাড়া হোভার ইফেক্ট নিয়ে কাজ করা বেশ কঠিন কিন্তু ইমেজ হোভার CSS লাইব্রেরী থাকলে আপনাকে অন্য কোন অ্যানিমেশন এর উপর নির্ভর করতে হবে না।
৮। SVG লোগো স্ক্রল অ্যানিমেশন । CSS3 এন্ড জাভাস্ক্রিপ্ট
সচরাচর CSS অ্যানিমেশনের পরিবর্তে SVG লোগো স্ক্রল অ্যানিমেশন । CSS3 এন্ড জাভাস্ক্রিপ্ট অ্যানিমেশনের মত কোনও কিছু ব্যবহার করে বেশ মজা পাবেন।
এটা 4k এরও কম কিন্তু অসাধারণ স্ক্রল পেইজ SVG অ্যানিমেশন যোগ করতে সক্ষম।
SVG লোগো স্ক্রল অ্যানিমেশন । CSS3 এন্ড জাভাস্ক্রিপ্ট অ্যানিমেশন দিয়ে কিছু সুন্দর সুন্দর ওয়েবপেইজ অ্যানিমেশন তৈরি করুন।
৯। ভায়াভি CSS3 স্ক্রল ইফেক্ট
CSS3 এবং HTML স্ক্রল এনিমেশন হিসেবে ভায়াভি CSS3 স্ক্রল ইফেক্ট সত্যিই একটি অসাধারণ সমাধান।
এর ফিচার গুলোর মধ্যে অন্তর্ভুক্ত আছেঃ
- 16 টি CSS3 স্ক্রল ইফেক্ট
- সহজে ইমপ্লিমেন্ট করার সুবিধা
- সম্পূর্ণ রেস্পন্সিভ
- এবং আরো অনেক কিছু
সম্পূর্ণ গ্রিড সিস্টেম ও মোবাইল বান্ধব, Viavi CSS3 Scroll Effects দেখতেই কেবল সুন্দর নয় সেইসাথে সহজেই ব্যবহার করা যায়।
১০। CSS3 স্পিনারস এন্ড লোডারস
জিআইএফ ফাইল ছাড়াই লোডার প্রয়োজন।
সমস্যা নেই। CSS3 স্পিনারস এন্ড লোডারস দিয়ে তা সম্ভব
- এটাতে পাবেন ২৫টি ভেরিয়েশন
- সহজেই কাস্টমাইজ করা যায়
- বর্ধিত করা সহজ
CSS3 স্পিনারস এন্ড লোডারস খুব ভালোভাবে নথিবদ্ধ এবং স্পিনার ও লোডারের জন্য সম্পূর্ণ CSS নির্ভর সল্যুশন।
১১। মিডিক্স - জেকুয়েরি ছাড়াই CSS3 অ্যানিমেশন।
মিডিক্সে এ ব্যবহার করা হয়েছে সম্পূর্ণ CSS3 যা কোনরকম জেকুয়েরি ইফেক্ট ছাড়াই ১৬ সেট CSS3 অ্যানিমেশনের একটি সংগ্রহ।
আপনি এগুলোতে সমন্বয় করতে পারবেন:
- এনিমেশন স্পিড
- অ্যানিমেশনর বিলম্ব
- আইকনের রং
Midix - CSS3 Animation Effects without jQuery তে আপনি শুধুমাত্র একটি অসাধারণ CSS অ্যানিমেশনের কালেকশনই পাবেন না, সেইসাথে বিনামূল্যে হালনাগাদ ও বন্ধুত্বপূর্ণ সহায়তাও পাবেন।
১২। CSS3 হোভার ইফেক্ট
CSS3 হোভার ইফেক্ট আরেকটি ভালো অপশন।
আপনি সহজেই পরিবর্তন করতে পারেন:
- রং
- বর্ডার সাইজ
- বৃত্ত থেকে চতুর্ভুজে রুপান্তর
- টেক্সট ব্লকের মাঝখানের জায়গা
৪৭৯ টি রেটিনা আইকন এবং ২০ টি ভিন্ন ভিন্ন ইফেক্টের সমন্বয়ে, CSS3 Hover Effects হচ্ছে ব্যবহার করা ও সংগ্রহ করার মত একটি অসাধারণ রিসোর্স।
১৩। ভিএস প্রিলোডার - আল্টিমেট CSS অ্যানিমেটেড প্রিলোডার
অ্যানিমেটেড প্রিলোডারের ক্ষেত্রে, ভিএস প্রিলোডার - আল্টিমেট CSS অ্যানিমেটেড প্রিলোডার হচ্ছে অনেক বেশি ইউনিক, সৃজনশীল এবং সুন্দর সমাধান যা আপনি সহজেই পেতে পারেন।
যেসব ফিচার পাবেন:
- ৬০ টি হেল্পার
- ৪০ টি প্রেজেন্ট
- ৩০ টি অ্যানিমেশন
- অসংখ্য রং
এটা একইসাথে খুব সুচারু এবং ইউনিক।
VSPreloader - Ultimate CSS Animated Preloaders টি আরও ভালোভাবে চেক করে দেখুন। আমার মনে হয় আপনি বেশ প্রভাবিত হবেন।
১৪। হিড - পিউর CSS3 অ্যানিমেশন ইফেক্ট
একটি CSS অ্যানিমেশনের সংগ্রহে আপনি যা যা চান, তাঁর সব কিছুই হিড - পিউর CSS3 অ্যানিমেশন ইফেক্টে পাবেন।
এটা ইন্সটল করা, এডিট করা ও SCSS দিয়ে কনফিগার করা বেশ সহজ (ফাইল অন্তর্ভুক্ত আছে)।
- ২০ ম্যাটেরিয়াল ডিজাইন কালার অপশন
- ফন্ট অসাম আইকনসমূহ
- ১৫ টি ইফেক্ট
- এবং আরও অনেক কিছু
হিড - পিউর CSS3 অ্যানিমেশন ইফেক্ট হচ্ছে রেটিনা ফ্রেন্ডলি, সাপোর্ট ফ্রেণ্ডলি এবং এটাতে ফ্রি আপডেট অন্তর্ভুক্ত করা হয়েছে।
১৫। অয়ন - CSS3 লিংক হোভার ইফেক্ট
যদিও বেশিরভাগ CSS অ্যানিমেশনে ইমেজ এবং পেইজ ইফেক্টের উপর জোর দেয়া হয়েছে কিন্তু অয়ন - CSS3 লিংক হোভার ইফেক্টে কেবলমাত্র লিংক হোভার ইফেক্টকেই আকর্ষণীয় করা হয়েছে।
এটাতে আপনি পাবেন ৩০ টি অসাধারণ CSS3 লিংক হোভার ইফেক্ট এবং:
- সলিড ব্রাউজার কম্প্যাটিবিলিটি
- সহায়ক নথিপত্র
- মডার্ন অ্যানিমেশন
- এবং আরও অনেক কিছু
অয়ন - CSS3 লিংক হোভার ইফেক্ট বান্ডেলটিতে সৃজনশীল, সুচারু এবং CSS অ্যানিমেশনের পরিমিত ব্যবহার করা হয়েছে, ফলে এটা রুচিশীল ও পছন্দসই হয়ে উঠেছে।
১৬। সিনিস্টার - পিউর CSS ইমেজ হোভার ইফেক্ট
১০০ এরও বেশি হোভার ইফেক্টের সমন্বয়ে, সিনিস্টার - পিউর CSS ইমেজ হোভার ইফেক্টে বেশ কিছু অসাধারণ সুন্দরভাবে ডিজাইনকৃত ইফেক্ট পাবেন।
এটাতে আরও আছে:
- ২২ কনটেন্ট ট্রাঞ্জিশন ইফেক্ট
- ১৮ টি ওভারলে ট্রাঞ্জিশন ইফেক্ট
- ২৩ বাটন ট্রাঞ্জিশন ইফেক্ট
- ১০০ হোভার ইফেক্ট
সিনিস্টার - পিউর CSS ইমেজ হোভার ইফেক্টে জাভাস্ক্রিপ্ট অথবা জেকুয়েরি ছাড়া সম্পূর্ণ CSS ব্যবহার করা হয়েছে। এতে আছে:
- zoom-in এবং zoom-out
- rotate X এবং rotate y
- ডান এবং বামদিকে ঘোরানো
- ঘুরানো ও ছোটবড় করার সুবিধা
- কিউবিক ট্রাঞ্জিশন
- লেয়ার হোভার
- এবং আরও অনেক কিছু
১৭। স্টাইলিশ সোশ্যাল মিডিয়া অ্যানিমেটেড আইকন স্টাইল
স্টাইলিশ সোশ্যাল মিডিয়া অ্যানিমেটেড আইকন স্টাইল দিয়ে আপনার সোশ্যাল মিডিয়া আইকনসমূহে CSS অ্যানিমেশন যুক্ত করে নিন।
পরিচ্ছন্ন ডিজাইনের পাশাপাশি এতে আছে নয়টি ভিন্ন ভিন্ন স্টাইল থেকে বেছে নেয়ার সুবিধা আছে। এতে আপনি পাবেন:
- সহজেই ইমপ্লিমেন্ট এবং কাস্টমাইজ করা যায়
- সলিড কোড বেস এবং ডকুমেন্টেশন
- কোন ইমেজ অথবা আইকন নির্ভর নয়
- ক্রস-ব্রাউজার কম্প্যাটিবল
- এবং আরও অনেক কিছু
স্টাইলিশ সোশ্যাল মিডিয়া অ্যানিমেশন আইকন স্টাইল আপনার সোশ্যাল মিডিয়ার আইকন লাইনআপের রঙ এবং CSS অ্যানিমেশনে চমৎকার ভাব যোগ করতে সক্ষম।
১৮। CSS3 অ্যানিমেশন
সহজেই আপনার div, p, এবং body এইচটিএমএল CSS3 অ্যানিমেশন দ্বারা অ্যানিমেট করে নিন।
এটি একটি চমৎকার স্নিপেট যা অনেকগুলো ভিন্ন ভিন্ন ডিজাইনে প্রয়োগ করা যায়।
ফিচারসমূহ:
- ব্যবহার ও কাস্টমাইজ করা সহজ
- কোনও জাভাস্ক্রিপ্ট নয়, শুধুমাত্র CSS3 ব্যবহার হয়েছে
- ১০+ অ্যানিমেশন
আপনার ডিজাইন টুলবক্সে কি CSS3 অ্যানিমেশন যোগ করতে চান?
১৯। পিউর CSS3 ইমেজ অ্যাকর্ডিয়ন
CSS3 ইমেজ অ্যাকর্ডিয়ন ব্যবহার করে আপনার CSS অ্যানিমেশনের তৈরি স্লাইডার তৈরি করুন।
এটা হচ্ছে:
- সম্পূর্ণ রেস্পন্সিভ
- কোন নির্দিষ্ট প্রস্থ নেই
- চারটি ক্যাপশন অপশন
- সহজে কাস্টমাইজ করা যায়
পিউর CSS3 ইমেজ অ্যাকর্ডিয়ন দিয়ে কিছু দৃশ্যমান ছন্দ তৈরি করুন।
২০। CSS3 মেগা টুলটিপ অ্যানিমেশন প্যাক
সাধারণ টুলটিপ ব্যবহার করে কি বিরক্ত?
CSS3 মেগা টুলটিপ অ্যানিমেশন প্যাক ব্যবহার করে CSS অ্যানিমেশনের কিছু যাদু যোগ করুন।
এই CSS অ্যানিমেশন টুলটিপ প্যাকে আছে:
- ১০ টি অ্যানিমেশন ইফেক্ট
- ৮ টি কালার প্রিসেট
- ডকুমেন্টেশন
- এবং আরও অনেক কিছু
CSS3 মেগা টুলটিপ অ্যানিমেশন প্যাকে আরও আছে ইন্টারনেট এক্সপ্লোরার ফলব্যাক।
উপসংহার
এনভেটো মার্কেটে যদিও বিভিন্ন ধরণের CSS অ্যানিমেশন আছে, তবুও হয়তোবা আপনার মনমতো কোন কিছু খুঁজে নাও পেতে পারেন।
সমস্যা নেই। নিজে নিজে তৈরি করে নিন!
এনভেটো থেকে Mastering CSS3 এর মত ইবুকগুলো দেখুন, বিভিন্ন ধরণের কোড কোর্স থেকে পছন্দমত কোর্সটি করুন, অথবা একটি পথ প্রদর্শক CSS3 কোড টিউটোরিয়াল খুঁজে বের করে তা অনুসরণ করুন।
