Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

কোডপেনে সিএসএস অ্যানিমেশনের ১৫টি অনুপ্রেরণাদায়ী দৃষ্টান্ত

by
Length:LongLanguages:

Bengali (বাংলা) translation by Syeda Nur-E-Royhan (you can also view the original English article)

ওয়েবে আমাদের বিভিন্ন ধরণের সৃষ্টি নিয়ে প্রদর্শনী করার মতো একটা জায়গায় পরিণত হচ্ছে কোডপেন। সিএসএস অ্যানিমেশন দিয়ে তৈরি অসাধারণ কিছু জিনিসের তালিকা এখানে দেওয়া হল!

১। জাভাস্ক্রিপ্ট মিকি ওয়াচ

জে সালভেটের (@jaysalvat) তৈরি অ্যাপল ওয়াচের মতো দেখতে মিকি ওয়াচ। 

সিএসএস ট্রানজিশন, এসভিজি গ্রাফিক, এবং জাভাস্ক্রিপ্টের চমৎকার সমন্বয় এটি। এর ফলে একটা আদুরে মিকি মাউস ঘড়ির মালিকানাও পেয়ে যাবেন।

২। সিএসএস সাবমেরিন

আলবের্তো শেরেজের (@ajerez) তৈরি সিএসএস সম্বলিত সাবমেরিন

গোলাকৃতির পোর্টের গর্তের আকারের কন্টেইনারগুলোর চমৎকার ব্যবহারে এই সিএসএস দ্বারা অ্যানিমেট করা সাবমেরিন বেশ চিত্তাকর্ষক।

৩। এএসসিআইআই এটি-এটি

টিম পিয়েত্রুস্কির (@TimPietrusky) তৈরি এটি-এটি

স্টার ওয়ার্স থেকে অনুপ্রাণিত এটি-এটি পার্সোনাল ক্যারিয়ার, সিএসএসে যে রং পাওয়া যায় তা দিয়ে টেক্সট ব্যবহার করে আঁকা। একটি চনমনে ইফেক্ট

৪। এসভিজি/সিএসএস লোডার

বিজ্জির (@Bidji) তৈরি লোডার এসভিজি/সিএসএস

এই লোডার পরিবর্তনশীল রং ব্যবহার করে ঘূর্ণ্যমান অনুভূতি দেয়।

৫। থ্রিডি সিএসএস টারডিস

জারউইন ভ্যান রোয়েনের (@Gerwinnz) তৈরি থ্রিডি সিএসএস টারডিস

সিএসএস দিয়ে কিছু অসাধারণ থ্রিডি ইফেক্ট তৈরি করা যায়। এখানে একটি থ্রিডি টারডিসের নমুনা দেওয়া হল:

৬। ডোজিং বার্ড বা তন্দ্রাচ্ছন্ন পাখি

পিটার ক্লাইনের (@pmk) তৈরি ডোজিং বার্ড

সাধারণ শিল্প শৈলী আর শুধুমাত্র সঠিক পরিমাণের অ্যানিমেশনের ফলে এই তন্দ্রাচ্ছন্ন পাখিটি পেয়েছে জীবনের ছোঁয়া। 

৭। নিখুঁত সিএসএস বর্ডার অ্যানিমেশন

আরপ্লাসের (@rplus) তৈরি এসভিজি ব্যতীত নিখুঁত সিএসএস বর্ডার অ্যানিমেশন

লোডিং স্টাইলের অ্যানিমেশন তৈরি করতে হলে সিএসএস বর্ডারের সাধারণ কিন্তু কার্যকর ব্যবহার প্রয়োজন।

৮। স্টার ওয়ার্স: দ্যা ফোর্স অ্যাওয়েকেনস

স্টার ওয়ার্স: ডনোভান হাচিনসনের (@donovanh) তৈরি সিএসএসের দ্যা ফোর্স অ্যাওয়েকেনস

সামনে মুক্তি পেতে যাওয়া স্টার ওয়ার্স মুভির টাইটেল সিএসএস, এইচটিএমএল এবং কিছুটা জাভাস্ক্রিপ্ট ব্যবহার করে তৈরি করা হয়েছে।

৯। থ্রিডি সিন্থ

নিকোলায় তালানভের (@suez) তৈরি নিখুঁত সিএসএস থ্রিডি সিন্থেসাইজার

সিএসএস ব্যবহার করে তৈরি থ্রিডি সিন্থ ঘুরিয়ে এবং কী'গুলো চালু করে দেখুন।  দারুণ কাজ করেছেন:

১০। ক্যাসকেডিং সোলার সিস্টেম

ট্যাডি ওয়ালশের (@tadywankenobi) তৈরি ক্যাসকেডিং সোলার সিস্টেম! 

আমাদের সোলার সিস্টেমের একটি মডেল। এখানে রয়েছে পরিমিত ঘূর্ণন গতি, উপগ্রহ, এবং বড়ো বড়ো সব গ্রহের খুঁটিনাটি চিত্র।  এখানে যে সূর্যের ছবি ব্যবহার করা হয়েছে এটি আসলে সত্যিকারের সূর্যের ছবি বসানো।

১১। থ্রিডি সোলার সিস্টেম

ওয়েন ডাংকলির (@waynedunkley) তৈরি পরিপূর্ণ সিএসএস থ্রিডি সোলার সিস্টেম

আরেকটি সোলার সিস্টেম। তবে এবার থ্রিডিতে। আলোছায়ার চমৎকার ব্যবহার।

১২। ফ্ল্যাট ডিজাইন ক্যামেরা

ডেমিয়েন পেরেইরা মোরবের্তোর (@damienpm) তৈরি সিএসএস অ্যানিমেশন সম্বলিত ফ্ল্যাট ডিজাইন ক্যামেরা

ফ্ল্যাট ক্যামেরাটির শাটারে চাপ দিলে সিএসএস অ্যানিমেশন ব্যবহার করে ছবি তুলতে দেখতে পারবেন।

১৩। রাত আর দিনের ক্রান্তিকাল

সিমন স্টিপার (@catagen) তৈরি ডে নাইট সিমুলেশন

দিন থেকে রাতে রূপান্তরের দৃশ্য দেখতে বাটনটি চাপ দিন।

১৪। সিএসএস সম্বলিত অ্যানিমেটেড স্প্রাইট

আভাজ বকিয়েভের (@samarkandiy) তৈরি সিএসএস সম্বলিত অ্যানিমেটেড স্প্রাইট

এক সারি ইমেজ (স্প্রাইট) ব্যবহার করে কিভাবে স্টপ-মোশন অ্যানিমেশন তৈরি করা যায় তার একটি নমুনা। এখানে ফরোয়ার্ড ও রিভার্স মোশনও দেওয়া আছে।

১৫। ডোডেকাহেড্রন

ওয়োনটেমের (@wontem) তৈরি ডোডেকাহেড্রন

পুরোপুরি সিএসএস দিয়ে তৈরি এবং অ্যানিমেট করা চমৎকার সূক্ষ্ম ডোডেকাহেড্রন।

উপসংহার

খুব বেশিদিন আগের কথা নয় যে ব্রাউজারের মধ্যে অ্যানিমেশনের জন্য আমরা ফ্ল্যাশ বা জাভাস্ক্রিপ্টের উপর নির্ভরশীল ছিলাম। আধুনিক ব্রাউজারে সিএসএসের জন্য আরও ভালো সাপোর্ট রয়েছে। এখানে থ্রিডি ও অ্যানিমেশন উন্নত করতে পর্যাপ্ত হার্ডওয়্যার রয়েছে।

এর জন্য ধন্যবাদ দিতে হবে কোডপেনের মতো সাইটগুলোকে। এদের কারণেই আমরা আগের যে কোন সময়ের চাইতে অনেক সহজে যে কোন কিছু শেয়ার করতে ও শিখতে পারছি। সম্প্রতি আপনার দেখা সবচাইতে অনুপ্রেরণামূলক অ্যানিমেশন ডেমো কোনগুলো?

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.