কাহিনী বলার কালা হোমো সেপিয়েন্সের কথা বলার আগে থেকেই শুরু হয়েছিল। এটি আমাদের সাথে বিবর্তন পায় এবং উপলব্ধ টুলগুলোর সাথে এডাপ্ট করে। এক জেনারেশন থেকে অন্য জেনারেশনে মৌখিকভাবে বলা কাহিনী হাতলিখা বই, ম্যাস প্রিন্টিং, ডিজিটাল ওয়ার্ড প্রসেসিং, এবং gầnে ইন্টারনেটের মাধ্যমে বিবর্তন পেল। মানব বিবর্তনের দৃষ্টিতে লাগে আমরা আজ উপলব্ধ সব টেকনোলজির পূর্ণ পটেনশিয়াল ট্যাপ করিনি। ভিডিও ভার্চুয়াল ওয়ার্ল্ড ডোমিনেশনের ক্যাম্পেইন শুরু করলেও, ওয়েবের অধিকাংশ কন্টেন্ট এখনো টেক্সট।
আধুনিক ওয়েব কন্টেন্ট ইন্টারঅ্যাক্টিভ হওয়া উচিত এবং ভালো পুরনো প্লেইন টেক্সটের পাশাপাশি বিভিন্ন মিডিয়া ইনকর্পোরেট করা উচিত। কিছু টুল আমাদের স্টোরিটেলিংকে কিছু ধাপ বাড়াতে সাহায্য করতে পারে। এবং আপনি ওয়ার্ডপ্রেস ইউজার হলে, Animate It! প্লাগইন ব্যবহার করে আপনার কন্টেন্টে কুল CSS3 অ্যানিমেশন যোগ করতে পারেন।
সম্ভাবনাগুলো কী কী?
HTML5 এর সাথে CSS3 আধুনিক ওয়েব ডিজাইনের সংক্রান্ত এক্রোনিম। সংক্ষেপে, CSS হলো ওয়েব কম্পোনেন্ট যা ইউজারকে ওয়েব পেজের চেহারা কন্ট্রোল করতে দেয়—লেআউট, পজিশন, ফন্ট, কালার ইত্যাদি। এর লেটেস্ট ইনকারনেশন CSS3, কোড দিয়ে ইমেজ এবং অ্যানিমেশন তৈরি করতে যথেষ্ট স্মার্ট।
খুশির খবর: আপনার কোডার হতে হবena CSS3 ওয়ার্ডপ্রেসে ব্যবহার করতে। Animate It! প্লাগইন CSS3 অ্যানিমেশন পোস্ট, উইজেট, এবং পেজে এডিটরে এক ক্লিকে অ্যাপ্লাই করতে দেয়। বস, ইউজার ট্রিগার কন্ট্রোল করতে পারেন। উদাহরণস্বরূপ, স্ক্রোল, ক্লিক, এবং হোভার-এ অ্যানিমেশন অ্যাপ্লাই করা যায়, এবং ইন্ডিভিজুয়াল অ্যানিমেশন ব্লকে আলাদা স্ক্রোল অফসেট যোগ করা যায়। প্লাগইন আরও অনেক ফিচারের সাথে আসে:
- ৫০+ এন্ট্রি, এক্সিট, এবং অ্যাটেনশন সিকার অ্যানিমেশন
- ডিলে ফিচার এবং ডুরেশন কন্ট্রোল অ্যানিমেশনে সিকোয়েন্স বানাতে
- অ্যানিমেশন ইনফিনিট বা নির্দিষ্ট বার প্লে করার অপশন
- ইন্ডিভিজুয়াল অ্যানিমেশন ব্লকে কাস্টম CSS ক্লাস যোগ করার অপশন
- স্মার্টফোন এবং ট্যাবলেটে অ্যানিমেশন এনেবল/ডিজেবল করার অপশন
Animate It! প্লাগইন দিয়ে কী কী করা যায়? আপনার আর্টিকেলে সিম্পল ইন্টারঅ্যাক্টিভিটি যোগ করুন, আকর্ষণীয় সেলস পেজ বানান, ফিকশনের ভাবনা গভীর করুন, বা পাওয়ারফুল বিজনেস প্রেজেন্টেশন বানান। শুধু এক জিনিস মনে রাখবেন: ভিজিটরকে অলিমিটেড অ্যানিমেশন দিয়ে বমবার্ড করা লয়াল রিডার পাওয়ার সেরা উপায় নয়।
Animate It! দিয়ে শুরু করুন
ইনস্টল এবং এক্টিভেট করার পর "WordPress Editor"-এ অ্যানিমেশন যোগ করার বাটন পাবেন। এটি শুধু ভিজ্যুয়াল মোডে見える, কিন্তু কমান্ড শিখলে প্লেইন টেক্সট মোড থেকে কোড ইনসার্ট করা সম্ভব (পরবर्तিতে আরো)।
বাটন প্রেস করলে অপশনস উইন্ডো আসবে। তিনটি ট্যাব আছে অ্যানিমেশন কাস্টমাইজ করার জন্য। প্রথম ট্যাব "Entry"। এটি স্ক্রিনে নির্দিষ্ট কন্ডিশনে এন্টার করার অ্যানিমেশন যোগ করার জায়গা। চারটি ড্রপ-ডাউন অপশন অ্যানিমেশন ইফেক্ট অ্যাডজাস্ট করতে সাহায্য করে।
- Animation: কী ধরনের অ্যানিমেশন চান সেটি বেছে নিন।
- Delay: অ্যানিমেশন শুরু হওয়ার আগে কতটুকু টাইম থাকবে সেটি অ্যাডজাস্ট করুন।
- Duration: অ্যানিমেশন কতক্ষণ চলবে সেটি। সংখ্যা বড় হলে অ্যানিমেশন স্লো হবে।
- Timing: অ্যানিমেশনের অনুপাত কতটুকু একবারে প্লে হবে। উদাহরণ: "easeIn" ইফেক্ট শুরুতে স্লো এবং শেষে ফাস্ট প্লে করবে।
"Animate It!" বাটনে ক্লিক করে ইফেক্ট কম্বিনেশন চেক করুন। রেজাল্ট পছন্দ হলে "Insert" বাটনে ক্লিক করে কন্টেন্টে ব্যবহার করুন।
"Exit" ট্যাব এন্ট্রির মতোই, কিন্তু স্ক্রিন থেকে লিভ করার অ্যানিমেশন যোগ করার জন্য। দুটো কাম্বাইন করলে একটি অবজেক্ট স্ক্রিনে আসবে এবং পরে চলে যাবে।
"Options" ট্যাবে অ্যানিমেশন জেনারেল সেটিংস কন্ট্রোল করুন। লুপ বা একবার প্লে, এলিমেন্ট ফাইনাল স্টেট রাখা, কাস্টম CSS কোড যোগ করা, এবং অ্যানিমেশন শুরু করার ট্রিগার সেট করা যায়। স্পেসিফিক্যালি ট্রিগার सम्बন্ধে—"Animate On" সেটিং—"Scroll" বেছে নিলে অ্যানিমেশন তবেই শুরু হবে যখন এরিয়া স্ক্রিনে ভিজিবল হবে।
আপনার কন্টেন্ট যোগ করুন
"Insert" বাটন প্রেস করলে কন্টেন্ট এরিয়ায় কয়েক লাইন শর্টকোড যোগ হবে। এই শর্টকোডগুলো অ্যানিমেশন কন্ট্রোল করবে। যেহেতু এগুলো ভ্যালুসহ কোড, আপনি কোডিং জানলে ম্যানুয়ালি যোগ করতে পারেন। অন্যদের Animate It! বাটনে আশ্রয় করা ভালো।
"Please add your content in this area" লিখা লাইন দেখবেন। এখানে যে আইটেমগুলো অ্যানিমেট করতে চান সেগুলো যোগ করুন। টেক্সট, ইমেজ, আইকন, লোগো, অডিও, ভিডিও, বা অন্যান্য শর্টকোড—সবই হবে। আমি Typed Js প্লাগইন দিয়ে জেনারেট করা টাইপড-ইফেক্ট শর্টকোড যোগ করেছি, রেজাল্ট চমৎকার।
Animate It! প্লাগইন ব্যবহার সম্পর্কে একটা কথা বলতে গেলে: "Experiment!" এক্সপেরিমেন্ট করুন এবং আলাদা কম্বিনেশন ট্রাই করুন আপনার কাঙ্ক্ষিত রেজাল্ট পাওয়ার জন্য। এটা ফান। এক মিনিটের কম সময়ে আমি যা বানালাম Typed Js প্লাগইন দিয়ে কাম্বাইন করে।
আপনি কি মনে করেন ইন্টারঅ্যাক্টিভ এলিমেন্ট যোগ করার সময় এসেছে? প্লাগইন ট্রাই করার প্ল্যান? অন্য অ্যানিমেশন প্লাগইন ব্যবহার করেন? নিচে কমেন্টে শেয়ার করুন।
