অ্যানিমেট.এসএস এখন প্রায় কয়েক বছর কেটে গেছে এবং আমাকে অবশ্যই পার্টিতে দেরি করতে হবে তা স্বীকার করতে হবে। কয়েকটি সিএসএস অ্যানিমেশন টিউটোরিয়ালের জন্য নেট অনুসন্ধান করার সময় আমি কয়েক মাস আগে এটি আবিষ্কার করেছি এবং আশেপাশে সঞ্চারিত করার দ্রুততম, সহজতম উপায়, অ্যানিমিট.সিএসএস কী খুঁজে পেয়েছিল।
ড্যান ইডেন নামে একটি লোক দ্বারা তৈরি, অ্যানিম্যাট.কম আপনার ওয়েবসাইটটিতে সিসিএস কীভাবে কাজ করে এবং কিছু অ্যানিমেশন ক্রিয়া পায় তা দেখার একটি দ্রুত উপায়।
'জাস্ট-অ্যাড ওয়াটার সিএসএস অ্যানিমেশন' হিসাবে বর্ণিত অ্যানিম্যাট সিএসএস একটি গুরুতর দিক নিয়ে কিছুটা মজাদার। এটি এমনকি আমার মতো শৌখিন ওয়েব ডিজাইনারকে সিএসএস অ্যানিমেশনের মূলসূত্রগুলি দ্রুত গ্রিপ করতে এবং ওয়েবসাইটগুলির জন্য সহজ তবে কার্যকর প্রভাব তৈরি করার অনুমতি দেয়। একক অ্যানিমেটেড শিরোনাম থেকে আরও জড়িত আন্দোলনে, এই সরঞ্জামটি এটি করতে পারে।
Animate.css
অ্যানিমেট সিএসএস গিটহাব থেকে ডাউনলোডের জন্য উপলব্ধ এবং মূলত এক জায়গায় সংগ্রহ করা সহজ সিএসএস এফেক্টের একটি গ্রন্থাগার। প্রতিটি অ্যানিমেশন সুন্দরভাবে প্যাকেজড এবং ব্যবহারের জন্য প্রস্তুত। আপনাকে যা করতে হবে তা হল আপনার পছন্দসই অ্যানিমেশনটি খুঁজে বের করতে এবং ক্লাসটি প্রয়োগ করতে হবে। সত্যিই এটি আছে।
এর মধ্যে 2, 500 কোডের কোড রয়েছে বলে আপনি না চাইলে আপনাকে পুরো লাইব্রেরিটি ডাউনলোড করতে হবে না। আপনি অ্যানিমেট সিএসএস সাইট দেখতে পারেন, একটি অ্যানিমেশন খুঁজে পেতে এবং ডাউনলোড অ্যানিমেট সিএসএস লিঙ্কটি ক্লিক করতে পারেন। এটি আপনাকে অনুলিপি হিসাবে দেখতে এবং উপযুক্ত হিসাবে ব্যবহার করার জন্য একটি ওয়েব পৃষ্ঠায় ক্লাসটি লোড করে।
যদিও গিটহাবটি ব্যবহার করা সহজ এবং আপনার সন্ধানের যে প্রভাবটি সন্ধান করছেন তা খুঁজে বের করার জন্য ill
- CSS গিটহাব পৃষ্ঠায় নেভিগেট করুন।
- উপাদানগুলির তালিকা অ্যাক্সেস করতে উত্স লিঙ্কটি ক্লিক করুন।
- তালিকা থেকে আপনি যে প্রভাবের সন্ধান করছেন তা নির্বাচন করুন। বাউন্সটি মনোযোগ সন্ধানকারী, সুতরাং মনোযোগ_দর্শনকারীদের লিঙ্কটি নির্বাচন করুন।
- বাউন্স.এসএস নির্বাচন করুন।
- অ্যানিমেশন প্রয়োগ করতে কোডটি অনুলিপি করুন এবং আপনার পৃষ্ঠায় রাখুন।
এটা সত্যিই যে সহজ। আপনি স্পষ্টতই বিভিন্ন প্রভাবের জন্য বিভিন্ন বিকল্প নির্বাচন করবেন তবে শেষ ফলাফলটি একই। পৃষ্ঠায় ভারী উত্তোলন করতে প্রয়োজনীয় কোডটিতে অ্যাক্সেস।
অ্যানিমেট সিএসএস সহ একটি অ্যানিমেটেড অবজেক্ট তৈরি করা
অ্যানিম্যাট সিএসএস দিয়ে দুর্দান্ত কিছু তৈরি করা সহজ। এটি সিসিএস কোড সন্ধান করা এবং এটি আপনার নিজের সিএসএসে যুক্ত করার বিষয়। আমি যদি এটি করতে পারি, যে কেউ পারে!
অ্যানিমেট সিএসএস পৃষ্ঠায় প্রথম বিকল্পটি বাউন্স হয়, সুতরাং আসুন আমরা এই উদাহরণটিতে এটি ব্যবহার করি।
- আটকান ' 'ভিতরে আপনার স্টাইলশিটে
- আপনি যে অ্যানিমেশনটি চান সেটির জন্য সিএসএস সন্ধান করুন এবং আপনি যে উপাদানটি অ্যানিমেট করতে চান তাতে এটি যুক্ত করুন। উদাহরণস্বরূপ, যোগ করুন ' 'পরীক্ষা করতে একটি বাউন্স প্রভাব যোগ করতে, একটি চিত্র বা যাই হোক না কেন।
- এটি সমস্ত কাজ করতে নিম্নলিখিত সিএসএস কোড যুক্ত করুন। উপরের বাউন.এসএস থেকে নেওয়া।
@ কিফ্রেমস বাউন্স {
, 20%, 53%, 80%, থেকে {
অ্যানিমেশন-সময়-ফাংশন: কিউবিক-বেজিয়ার (0.215, 0.610, 0.355, 1.000);
রূপান্তর: অনুবাদ 3 ডি (0, 0, 0);
}
40%, 43%
অ্যানিমেশন-সময়-ফাংশন: কিউবিক-বেজিয়ার (0.755, 0.050, 0.855, 0.060);
রূপান্তর: অনুবাদ 3 ডি (0, -30px, 0);
}
70%
অ্যানিমেশন-সময়-ফাংশন: কিউবিক-বেজিয়ার (0.755, 0.050, 0.855, 0.060);
রূপান্তর: অনুবাদ 3 ডি (0, -15px, 0);
}
90%
রূপান্তর: অনুবাদ 3 ডি (0, -4px, 0);
}
}
.লাফিয়ে ওঠা; বড়াই {
অ্যানিমেশন-নাম: বাউন্স;
রূপান্তর-উত্স: কেন্দ্র নীচে;
}
অ্যানিমেট সিএসএসের সাথে আরও অ্যানিমেশন নিচ্ছে
উপরের সিকোয়েন্সটি পৃষ্ঠাটি প্রথম লোড হওয়ার পরে একটি বাউন্স প্রভাব যুক্ত করে, যা দুর্দান্ত তবে এককালীন জিনিস। কীভাবে আমরা এটিকে হোভারে যুক্ত করি। এইভাবে, যখনই কেউ পরীক্ষার উপরে ঘোরাফেরা করে, তা বাউন্স করে। এটি কোনও প্রোডাকশন ওয়েবসাইটে আমি করব এমন কিছু নয়, তবে সবকিছু কীভাবে কাজ করে তা প্রদর্শন করার জন্য এটি দুর্দান্ত উপায়।
হোভার ইফেক্টে বাউন্স যুক্ত করতে আপনার সিএসএসে নিম্নলিখিত কোডটি যুক্ত করুন। দ্য মাউস যতবার এলিমেন্টের উপরে চলে যায়, তা বাউন্স করা উচিত।
.animated: হোভার {
-ওয়েবেকিট-অ্যানিমেশন-সময়কাল: 1 এস;
-মোজ-অ্যানিমেশন-সময়কাল: 1 এস;
-এমএস-অ্যানিমেশন-সময়কাল: 1 এস;
-o-অ্যানিমেশন-সময়কাল: 1 এস;
অ্যানিমেশন-সময়কাল: 1 এস;
-উইবকিট-অ্যানিমেশন-ফিল-মোড: উভয়;
-মোজ-অ্যানিমেশন-ফিল-মোড: উভয়;
-এমএস-অ্যানিমেশন-ফিল-মোড: উভয়;
-o-অ্যানিমেশন-ফিল-মোড: উভয়;
অ্যানিমেশন-পূরণ-মোড: উভয়;
}
আপনি যদি সিএসএস জানেন তবে কীভাবে বিভিন্ন ক্রিয়ায় বিভিন্ন প্রভাব প্রয়োগ করতে হয় সে সম্পর্কে আপনি আমার চেয়ে অনেক ভাল জানেন। শিক্ষানবিস হিসাবে, এটি এবং অ্যানিমেট.কম-এ সরবরাহিত লাইব্রেরিগুলি আমার ওয়েব পৃষ্ঠাগুলির জন্য মৌলিক, তবে কার্যকর অ্যানিমেশন তৈরি করতে সহায়তা করে।
আমি জানি না যে আমি একটি লাইভ ওয়েবসাইটে কতগুলি ব্যবহার করব কারণ তারা সর্বদা খুব ভালভাবে যায় না এবং মোবাইল ব্যবহারকারীরা সেগুলি মোটেও পছন্দ করে না বলে মনে হয়। তবে CSS কীভাবে কাজ করে এবং কীভাবে এটি ওয়েবকে বাড়ানোর জন্য ব্যবহার করা যায় তার একটি পাঠ হিসাবে, এটি একটি দুর্দান্ত উত্স। আমি কেবল একটি শিক্ষানবিস তবে এমনকি এই টিউটোরিয়ালটির জন্য অ্যানিম্যাট সিএসএসের সাথে কয়েক ঘন্টা ব্যয়ও আমাকে অনেক কিছু শিখিয়েছে। আমার মনে হয় আমি শেষ হওয়ার আগে এটির সাথে আরও অনেক খেলব। তোমার কী অবস্থা?
